Czy warto używać preprocesora? - Zalety SCSS

[c00bie]

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ń

Kod:

npm install -g sass

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;
}