Pracę z preprocesorami CSS czyli SASS, SCSS i LESS trudno wyobrazić sobie bez użycia automatyzatorów zadań. Do przekonwertowania kodu na CSS możemy wykorzystać Grunt.js, Gulp.js i Webpack (po szczegóły zapraszam do poprzednich wpisów).
Wprawdzie często używa się określenia SASS myśląc o SCSS, jednak istnieje istotna różnica między jednym, a drugim.

SCSS

SCSS (Sassy CSS) – używa zapisu zbliżonego do CSS, co zdecydowanie ułatwia rozpoczęcie pracy z nim osobom znającym CSS. Wymaga używania nawiasów klamrowych oraz średników, jednak nie ma dla niego znaczenie wcięcie kodu. Mixiny, include, import i extend, są poprzedzone @.

SASS

SASS (Syntactically Awesome Style-Sheets) – był oryginalnym językiem, z którego później powstał SCSS. Jest krótszy w zapisie ponieważ nie wymaga średników i nawiasów klamrowych. Jednak bardzo istotne, są wcięcia w kodzie. W zapisie różni się od SCSS również deklaracją mixin i include.

SASS

Zmienne w SCSS

Zmienne pomogą zachować czytelność kodu oraz umożliwią łatwą ich zmianę w przyszłości. Najprostszym przykładem użycia zmiennych jest deklaracja w projekcie dominujących kolorów. Jeżeli pojawi się potrzeba ich zmiany, zrobimy to w jednym miejscu, gdy w normalnym CSS zmuszeni byliśmy szukać kolorów w wielu miejscach.


W Sass deklarację poprzedza znak $: $linkColor: #f9425e;

Przykładowa deklaracja zmiennych:

$main-color: #ff0000;
$head-width: 1200px;
$text-color: $main-color;
$txt-font: Arial, Verdana, sans-serif;

Użycie:

p {
  color: $main-color;
  width: $head-width;
}

Mixins (domieszki)

Mixiny, są całymi fragmentami kodu, które mogą być wielokrotnie powielane. Najprostszym przykładem mixiny jest:

@mixin my-header {
       Color: #fff;
       Margin-top: 15px;
       Margin-bottom: 15px; 
}

Użycie:

#main {
       @include my-header;
       Background-color: orange;  
}

Innym bardziej skomplikowanym przykładem jest możliwość użycia argumentów w deklaracji mixin jak również wartości domyślnych dla nich:

@mixin transition($prop: all, $speed: 0.2s, $easing: linear) {
       -webkit-transition: $prop $speed $easing;
       -moz-transition: $prop $speed $easing;
       -o-transition: $prop $speed $easing;
       -ms-transition: $prop $speed $easing;
       transition: $prop $speed $easing;
}

Użycie:

img { 
    @include transition($easing: ease-out); 
}

W przypadku takiego użycia, jeżeli nie zostaną podane parametry wywołania to przybiorą one domyślne wartości czyli: ($prop: all, $speed: 0.2s, $easing: linear). Można jednak przy wywołaniu zmienić każdy z tych parametrów lub jedynie wybrany jak widać w powyższym przykładzie użycia.

Zagnieżdżanie selektorów

Kolejną bardzo użyteczną możliwością SASS / SCSS jest zagnieżdżanie selektorów. Dzięki takiemu podejściu po raz kolejny kod stanie się bardziej przejrzysty. Również zaoszczędzone zostanie powielanie nazwy danego elementu dzięki użyciu ‘&’. Wszystko co dotyczy danego elementu oraz jego potomków zgodnych z drzewem DOM pojawi się w jednym miejscu.

Podstawowe zagnieżdżenie to płytkie odwzorowanie struktury HTML:

body {
      div { 
         color: red; 
      }
}

Oprócz standardowego zagnieżdżania, można użyć &, który stanowi powielenie rodzica np.:

body {
      &:hover { 
         color: blue; 
      }
}

Oznacza to, że przypisujemy do elementu body w stanie hover kolor czcionki niebieski.

Dziedziczenie

Dziedziczenie odgrywa podobną rolę do mixinów. Tutaj również pobieramy gotowe style z jednego elementu i używamy je na innym elemencie wzbogacając całość dodatkowymi stylami. W celu skorzystania z dziedziczenia należy użyć słowa kluczowego @extend. W poniższym przykładzie dwie klasy dziedziczą style z klasy button:

.button {
    border: 1px solid #ccc;
    padding: 10px;
    border-bottom-style: dotted;
}
.redbutton {
    @extend .button;
    color: red;
}
.greenbutton {
    @extend .button;
    color: green;
}

Wbudowane funkcje

darken(color, wartość %) – wskazany kolor zostanie przyciemniony o wskazaną wartość

buton:hover: {
      background-color: darken(#ff9393, 50%); 
}

Lighter(color, wartość %) – wskazany kolor zostanie rozjaśniony o wskazaną wartość

percentage(wartość x.x) – zamienia ułamek na procent np. percentage(0.2) => 20%


Dużo więcej funkcji znaleźć można w dokumentacji na stronie sass-lang. Gdyby to było ciągle mało istnieje możliwość deklaracji własnych funkcji poprzez:

@function f-name($arg) {  
     @return val-return;  
}

Zanim zabierzesz się do pisania własnych funkcji warto popatrzeć na bibliotekę Compass. Można tam znaleźć sporo interesujących gotowców: http://compass-style.org/reference/compass/css3/ – wybierz najpierw górną belkę: Browser Support CSS3 Helpers Layout Reset Typography Utilities, a następnie konkretne style z bocznej belki (z lewej strony).


Zapraszam do kolejnego artykułu, którym skończę temat SASS / SCSS. Poruszone będą tam zagadnienia: modułowość, warunki, pętle.

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij