Jak u偶ywa膰 Sass w IDE Microsoft Visual Studio

> Dodaj do ulubionych

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