Bywają momenty, że korzystanie z CSS może być męczące. Weźmy na przykład sytuację, gdy odwołujemy się do różnych elementów potomnych i tak skomplikowanego selektora, potrzebujemy obliczeń, lub korzystamy z właściwości które wymagają prefiksów (-webkit, -moz itd.). Tutaj z pomocą przychodzi nam
SCSS. Jest to język arkuszy stylu, bardzo podobny do CSS, pozwalający pisać prostszy i bardziej czytelny kod, który jest kompilowany do zwykłego CSS.
Aby móc korzystać z SCSS, należy zainstalować kompilator SASS. Najprostszym sposobem jest poprzez Node.js i jego menedżer pakietów npm. Po zainstalowaniu Node.js, należy użyć w wierszu poleceń
a następnie przejść do projektu i użyć polecenia
Kod:
sass --watch <wejście.scss> [wyjście.css]
które spowoduje, że po każdej zmianie pliku zostanie on na nowo skompilowany. Można podać nazwę pliku wyjściowego, ale nie trzeba - zostanie wtedy wykorzystana nazwa pliku wejściowego.
Zalety SCSS
- Zagnieżdżanie
SCSS pozwala zamieszczać jeden selektor wewnątrz drugiego - zagnieżdżony element będzie rozszerzeniem selektora nadrzędnego.
Przykład:
Kod:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Wynik:
Kod:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
- Zmienne
O ile CSS ma obsługę zmiennych, to nie jest ona idealna, a także nie wszystkie przeglądarki je obsługują, np. słynny Internet Explorer. Tu na pomoc przychodzi SCSS, wprowadzający swoje własne zmienne, które podczas kompilacji są zastępowane przez ich wartości.
Przykład:
Kod:
$fonts: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $fonts;
color: $primary-color;
}
Wynik:
Kod:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
- Obliczenia
W celu ułatwienia sobie życia, SCSS pozwala także na wykonywanie prostych obliczeń bez potrzeby użycia funkcji calc().
Przykład:
Kod:
article {
float: left;
width: 600px / 960px * 100%;
}
aside {
float: right;
width: 300px / 960px * 100%;
}
Wynik:
Kod:
article {
float: left;
width: 62.5%;
}
aside {
float: right;
width: 31.25%;
}
- Dziedziczenie
SCSS pozwala także odwoływać się do właściwości innych selektorów, bez potrzeby ich kopiowania.
Przykład:
Kod:
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
Wynik:
Kod:
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
- Listy i mapy
Zamiast przerzucać się między różnymi zmiennymi, SCSS pozwala także na używanie list zawierających wartości oraz map, czyli zestawów par klucz-wartość. Przy użyciu @each można utworzyć selektor dla każdego obiektu w niej zawartego.
Przykład:
Kod:
$rgb: (
r: red,
g: green,
b: blue
);
@each $key, $val in $rgb
{
.color-#{$key}
{
color: $val;
}
}
Wynik:
Kod:
.color-r {
color: red;
}
.color-g {
color: green;
}
.color-b {
color: blue;
}