Jak używać Sass w IDE Microsoft Visual Studio

31 października 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *