Sass to technologia, której twórcy postawili sobie za cel przywrócić webmasterom radość z używania kaskadowych arkuszy stylów (CSS).

Jest to zbiór rozszerzeń standardu CSS, które ułatwiają pisanie nowych jak i utrzymanie istniejących arkuszy stylów.

Plik Sass jest przed użyciem zamieniany na zwykły plik CSS, dzięki czemu technologia ta nie wymaga instalowania w przeglądarkach żadnych dodatkowych wtyczek.

W artykule tym dowiesz się, jak rozpocząć używanie Sass w środowisku programistycznym Microsoft Visual Studio do tworzenia stron internetowych opartych na technologii ASP.NET.

Narzędzia potrzebne do używania Sass w Microsoft Visual Studio

Aby móc używać Sass w ASP.NET najprościej jest zaopatrzyć się w narzędzie Web Workbench firmy Mindscape. Jest to rozszerzenie do środowiska Visual Studio dodające możliwość edycji i kompilacji skryptów Sass (a także obsługę LESS i CoffeeScriptu). Na dodatek jego podstawowa wersja jest darmowa :)

Instalowanie rozszerzenia Web Workbench

Zainstaluj rozszerzenie Web Workbench do Visual Studio — aktualnie obsługiwane są Visual Studio 2010 i Visual Studio 2012.

Gdy go zainstalujesz, w IDE pojawią się nowe elementy, które można dodawać do aplikacji ASP.NET.

Dodawanie Sass do projektu Web Forms w ASP.NET

• W Visual Studio utwórz nową pustą aplikację sieciową ASP.NET
• Dodaj nowy formularz Web Form o nazwie default.aspx
• W nagłówku dodaj łącze <link href="css/styles.css" rel="stylesheet" />
• Utwórz folder o nazwie css
• W folderze css dodaj nowy element, wybierz pozycję Sass SCSS Style Sheet i w polu nazwy wpisz styles.scss. Zostanie utworzony i otwarty plik .scss z domyślną treścią body {}
• Zmień zawartość tego pliku na następującą: body {background-color: black;}
• Zapisz plik i poczekaj kilka sekund…
• Teraz w okienku Solution Explorer znajdziesz plik styles.css, który został wygenerowany przez narzędzie Web Workbench z pliku styles.scss.
• Uruchom aplikację, aby zobaczyć, że kolor tła zmieni się na czarny.
• Za każdym razem, gdy w pliku styles.scss zostaną wprowadzone jakieś zmiany, po jego zapisaniu następuje ponowne wygenerowanie pliku styles.css.

To wszystko, możesz rozpocząć korzystanie z technologii Sass, aby pisać łatwiejsze w utrzymaniu i bardziej przejrzyste arkusze stylów.

Niniejszy artykuł jest przeróbką Getting Started with SASS for Microsoft Developers i jest dostępny na zasadach licencji Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License