Forum_EduPlus
Czy warto używać preprocesora? - Zalety SCSS - Wersja do druku

+- Forum_EduPlus (http://edukasprzak.ugu.pl)
+-- Dział: PROGRAMOWANIE (/forumdisplay.php?fid=7)
+--- Dział: CSS (/forumdisplay.php?fid=11)
+--- Wątek: Czy warto używać preprocesora? - Zalety SCSS (/showthread.php?tid=29)



Czy warto używać preprocesora? - Zalety SCSS - c00bie - 06-04-2020 07:56 PM

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