Umbraco 7 mit BootStrap 3 und SASS in Visual Studio 2013

Bootstrap SASS Integration

Öffnen Sie die Umbraco 7-Projekt in Visual Studio und starten Sie die Nuget Package Manager im Tools-Menü –> Library Package Manager –> Package Manager Console. Auf dem Package Manager Console-Bildschirm, geben Sie den Befehl für die Installation des Bootstrap-SASS Packets ein

pm> Install-Package twitter.bootstrap.sass 

Es wird die aktuelle Version des Packets installiert. Im Projektverzeichniss des Solution Explorer finden sich die neuen Bootstrap-SAAS-Dateien im Verzeichnis "sass" sowie im "scripts" Ordener

Einbetten eines SAAS Compilers in Visual Studio

Visual Studio 2013 ermöglicht die Bearbeitung von SAAS-Dateien von Hause aus. Die Kompilierung muss extern vorngenommen werden.

SassyStudio

Es existieren verschiedene Möglichkeiten SASS Dateien zu kompilieren. Im Folgenden wird Gebrauch gemach von der Extension SassyStudio Die Extension ist kostenlos über Visual Studio installierbar. Öffnen sie im Tools-Menü die Auswahl Extensions and Updates und suchens Sie dort nach dieser Extension. Nach der Installation ist ein Restart erforderlich.

Ruby

SassyStudio kompiliert SASS-Dateien unter Zurhilfenahme von Ruby. Eine Installation des Rub<-Packets ist also ebenfalls erforderlich. Den Installer für Ruby finden sie unter http://rubyinstaller.org/downloads/.

Nach der Installation von Ruby muss der Installationspfad in SassyStudio bekannt gegeben werden. Öfnnen sie im Tools-Menü den Eintrag Optionen und suchen sie nach "SassyStudio". Als oberstes Konfigurationsfeld findet sich dort der Ruby-Installationspfad. Tragen Sie hier zuvor in der Ruby-Installation festgelegten Pfad ein.

Smocketest

SASS Dateien werden nun entsprechend der Voreinstellung in den SassyStudio-Optionen bei Abspeicherung kompiliert. Öffnen Sie eine BootStrap-SCSS-Datei und nehmen Sie Änderungen vor. Nach Abspeicherung sollte im sass-Verzeichnis des Projekts eine neue (oder veränderte) BootStrap.css Datei vorhanden sein.

Undeclared Variable

Der Hinweis "Undeclared Variable" für Variablen, die in der Datei _variables.scss definiert sind, kann deaktiviert werden durch die Zeile

/// <reference path="_variables.scss" /> 

am Anfang einer scss Datei.

Einbindung in Umbraco

Umbraco findet Stylesheets im Ordner CSS der Visual Studio Projekte. Verschieben sie daher alle Ordner und dateien aus dem Ordner sass in diesen Ordner.