Arsenał Front End Developera: Opanuj instalację SASS z tym szybkim przewodnikiem
Czy kiedykolwiek marzyłeś o zmiennych w kodzie CSS? A może o innych funkcjonalnościach takich jak funkcje? Najprostszym sposobem na posiadanie zmiennych w CSS jest praca z preprocesorem takim jak SASS.
Ruby
Na początek musisz sprawdzić, czy masz Ruby na swoim komputerze. Wpisz w terminalu:
ruby -v
Jeśli wykonanie tej komendy zwróci coś podobnego do:
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]
możesz przejść do następnego kroku i rozpocząć proces instalacji sass. Jeśli nie, musisz zainstalować interpreter ruby. Na Mac OSX jest on zainstalowany domyślnie. Na Windows możesz użyć tego linku https://www.rubyinstaller.org/
Instalacja SASS
Jeśli masz interpreter Ruby, możesz rozpocząć instalację SASS. Wpisz w terminalu:
sudo gem install sass
Krótkie wprowadzenie do SASS
Kompilacja
Kompilacja pliku jest dość prosta.
sass filename.sass:filename.css
Ta opcja utworzy dla Ciebie plik filename.css CSS z pliku filename.sass SASS.
Jeśli nie chcesz powtarzać tej opcji i potrzebujesz dodać watcher, po prostu wpisz:
sass --watch filename.sass:filename.css
Gdy plik SASS zostanie zmieniony, plik CSS zostanie automatycznie wygenerowany.
Opcje kompilacji
Dla lepszego debugowania polecam używać DevTools przeglądarki z mapami źródłowymi. Uwaga: FireSass/Firebug są przestarzałe. Nowoczesne przeglądarki mają wbudowane wsparcie dla map źródłowych SASS. Używanie map źródłowych jest dostępne, gdy skompilujesz plik tą komendą:
sass --watch filename.sass:filename.css --debug-info
Dla plików produkcyjnych polecam używać kompilacji z trybem minifikacji.
sass filename.sass:filename.css --style compressed
Użycie
Zmienne
Używanie zmiennych jest przydatne, gdy potrzebujesz sparametryzować niektóre elementy. Na przykład kolory.
$c_bg_gray: #252525 //bg color
$c_contact_blue: #00d8ff //font color
.nav a
color: $c_bg_gray
background: $c_contact_blue
.footer a
color: $c_bg_gray
background: $c_contact_blue
Gdy używasz zmiennych, nie musisz przeszukiwać kodu w poszukiwaniu koloru. Wystarczy zmienić wartość zmiennej i iść dalej.
Mixiny
Czasami musisz powtórzyć jakiś kod i podobnie jak funkcja w języku programowania, możesz użyć mixinu:
=borderRadius($time)
-webkit-border-radius: $time
-moz-border-radius: $time
border-radius: $time
.roundBox
+borderRadius($radius)
