[HTML|JS|CSS] Sass : Wprowadzenie

Sass (Syntactically Awesome StyleSheets) jest rozszerzeniem CSS 3 umożliwiającym tworzenie arkuszy styli w sposób przyjemniejszy dla programisty i łatwiejszy do zarządzania.

Pliki Sass mają rozszerzenie .scss (Sassy CSS) i są transformowane do plików .css za pomocą narzędzi uruchamianych z command line. Jako, że Sass rozszerza CSS 3, to w plikach .scss możliwe jest zapisywanie każdej konstrukcji składniowej zwykłego CSS 3.

Strona główna Sass

Instalacja:

Aby uruchomić Sass pod windows musimy zainstalować ruby gems, a także ruby. Pomocne linki:

1. Ruby
2. Ruby Gems

Następnie w Command Line wpisujemy:

gem install sass 

Teraz możemy utworzyć dwa pliki w folderze z projektem : style.css oraz style.scss.

Aby uruchomić tryb śledzenia zmian, należy wpisać w command line :

sass --watch style.scss:style.css

Każde zapisanie pliku style.scss spowoduje transformację jego treści do style.css. Jeżeli nie popełniliśmy błędu składniowego, otrzymamy na konsoli komunikat:

 Change detected to: E:/Projects/$HTML-JS-CSS/Sass/style.scss

Gdy popełniony zostanie z naszej strony jakiś błąd, informację o nim dostaniemy na konsoli, a także w pliku wyjściowym css, przykładowo:

Syntax error: Invalid CSS after "...ound-color: red": expected ";", was ""
        on line 3 of style.scss