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