Strony internetowe rozwijają się bardzo dynamicznie, a wraz z nimi całe zaplecze. Począwszy głównego języka HTML, aż po framework’i Bootstrap, Angular, itp. Nie inaczej jest w zarządzaniu stylami. Choć tam nadal głównym językiem jest CSS, to jednak coraz mniej się w nim pisze style dla strony. Oczywiście przeglądarki interpretują póki co wyłącznie style CSS, to jednak programowanie skryptów odbywa się już w innych językach. Sass/SCSS, Less , to teraz najpopularniejsze języki programowania styli przeglądarek. Jak widać język Sass składa się z 2 odmian. Pierwsza to właśnie Sass, drugi to SCSS.

Dlaczego SCSS

Nie mam zamiaru pisać dlaczego nie standardowe CSS, bo wymienione wyżej języki są pod każdym względem lepsze. Można się spierać co do pozostałej „trójki”, który jest najlepszy i najwygodniejszy. Tak jak w życiu bywa, tak w tym przypadku kwestia gustu i komfortu pracy. Przeszedłem wszystkie te języki i muszę przyznać, że SCSS jest dla mnie najlepszy, najwygodniejszy i najbardziej logiczny. Jednak różnica jest niewielka, więc każdy kto będzie radził sobie w jednym z nich będzie mógł przeskoczyć na inne w bardzo prosty sposób. W tym poście postaram się przybliżyć jednak ten który jest dla mnie pierwszorzędny w pisaniu stylów, czyli SCSS.

Instalacja SCSS

Przeglądarki internetowe nie interpretują skryptów SCSS, jak i Less oraz Sass. Dlatego niezbędne jest odpowiednie narzędzie do interpretacji języka SCSS. W naszym przypadku potrzeba zainstalować Ruby, który można pobrać tutaj. Mając już zainstalowany program Ruby należy przejść do linji poleceń aby zainstalować Sass/SCSS, wpisując komendę:

gem install sass

Mając już Te dwie czynności załatwione możemy przejść do tworzenia kodu. Jak już wspomniałem style Sass nie mogą działać same w sobie, potrzeba czegoś do skompilowania. W naszym przypadku jest to Ruby. Jednak sama instalacja programu oraz Sass nie wystarcza. Teraz w naszym projekcie tworzymy pliki style.scss oraz style.css

W linji poleceń z koleji wprowadzamy kod:

sass –watch style.scss:style.css

Co nam to daje? Teraz program każdą zmianę którą wykonamy w naszym pliku style.scss skompiluje i zapisze do pliki style.css. Tak, że pracujemy wyłącznie na SCSS, a style css beda się same tworzyły, tak aby przeglądarka nie miała później problemu ze stylami. Innym lepszym(płatnym) rozwiązaniem jest skorzystanie np. z programy WebStorm, który interpretuje i kompiluje style SCSS, Sass, Less. Nie trzeba korzystać z funkcji watch, a poza tym sam pokazuje błędy w składni, czy pomaga w pisaniu kodu.

SCSS w praktyce

Mając już wszystko przygotowane można zacząć pisać linie kodu. Na początek warto zapoznać się jak działa zagnieżdżanie w SCSS.

Zagnieżdżanie kodu

.content 
{
background-color: red;
border-bottom:1px solid #ddd;
}
.content p
{
font-size: 14px;
color:#555;
}
.content p a
{
text-decoration:none;
color:#fff;
}
.content p a:hover
{
text-decoration:underline;
}
.content p a.active
{
color:red;
}

Mamy kilka linijek kodu css. Teraz zobaczmy jak można to zrobić w SCSS

.content
{
 background-color:red;
 border-bottom:1px solid #ddd;
 p
 {
  font-size: 14px;
  color:#555;
  a
  {
    text-decoration:none;
    color:#fff;
   &:hover
   {
    text-decoration:underline;
   }
   &.active
    {
     color:red;
    }
  }
 }
}

Jak dla mnie to jest to niesamowita wygoda i komfort, że nie trzeba za każdym razem pisać klasy content. Jednak to dopiero początek. Bo na tym przykładzie będziemy budować dalej, bardziej automatyzować nasz kod.

Zmienne w SCSS

Dla naszej wygody tworzymy sobie dodatkowy plik zmienne.scss. W nim będą zawierały się takie elementy jak kolory, czcionki, wielkość, itp. Tak naprawdę możemy tam dać wszystko co nam się zapragnie.
W pliku zmienne.scss wpisujemy:

$mainColor: red;
$linkColor: #fff
$fontColor: #555;
$borderColor: #ddd;

$fontSize: 14px;

Mając już zdeklarowane zmienne przechodzimy do styli głównych, a więc pliku style.scss. Na początek musimy zaimportować cały plik zmienne.scss, tak aby można było z tym zmiennych korzystać. Robimy to poprzez @import. Jest to taki sam import jakim np. chcemy zainspirować do naszej strony czcionki z google fonts

@import 'zmienne.scss';
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700');

Zmienne SCSS

Mając już zagnieżdżony kod oraz zaimportowane zmienne do głównych styli możemy w zamienić kolory oraz rozmiar czcionki zmiennymi.

.content
{
 background-color: $mainColor;
 border-bottom:1px solid $borderColor;
 p
 {
  font-size: $fontSize;
  color: $fontColor;
  a
  {
    text-decoration:none;
    color: $linkColor;
   &:hover
   {
    text-decoration:underline;
   }
   &.active
    {
     color: $mainColor;
    }
  }
 }
}

W naszym kodzie zmieniły się statyczne kolory, oraz rozmiar czcionki w zmienne dynamiczne, które generują to samo, lecz poprzez zmienne. Jak zobaczymy w naszym kodzie css nie będzie żadnej zmiany.

SCSS Mixins

Nazwa dziwnie brzmi, ale to nic innego jak gotowe funkcje, które deklarujemy w osobnym pliku i wykorzystujemy na stronie. Funkcje takie mają sens dla wielu takich samych powtarzających się elementów. Dobrym przykładem może stworzenie mixinu dla znacznika a.

@mixin main_url
{
  color: $fontColor;
  text-decoration:none;
  &:hover
  {
    color: $mainColor;
  }
    &.active
    {
     color: $mainColor;
    }
}

Mając już taką funkcję w naszym kodzie zmienimy w następujący sposób:

.content
{
 background-color: $mainColor;
 border-bottom:1px solid $borderColor;
 p
 {
  font-size: $fontSize;
  color: $fontColor;
  a
  {
   @include main_url;
  }
 }
}

Jak widać, nasz skrypt się znacznie zmniejszył. Kody jest mniej a działanie takie same. Plik css w dalszym ciągu pozostaje bez mian. Innym bardzo częstym przykładem mixinów może być border. Funkcja dla bordera to:

@mixin default_border($width, $style, $color) {
  border-width: $width;
  border-style: $style;
  border-color: $color;
}

Dla takiej funkcji w naszym kodzie możemy to wykorzystać w następujący sposób:

.content
{
 background-color: $mainColor;
 @include default_border( 0 0 1px 0, solid, $borderColor);
 p
 {
  font-size: $fontSize;
  color: $fontColor;
  a
  {
   @include main_url;
  }
 }
}

Funkcję tą możemy wykorzystać w każdym innym elemencie, którym chcemy zastosować border. Niezależnie od formy, koloru, grubości jest to uniwersalna funkcja.

Działania matematyczne i pozostałe funkcje SCSS

Jak już widać sass/scss dają ogromne możliwości. W naszym skrypcie jak do tej pory mamy całkiem zautomatyzowany kod, który łatwo można zmienić, poprzez mixiny, kolory, wielkość i styl. Wystarczy, że zmienimy w jednym miejscu kolor i cała strona będzie inna.

/*Działania matematyczne*/
width: 600px / 960px * 100%;
font-size: $fontSize + 2;
percentage(100px / 50px) /* => 200% */
saturate(#855, 20%) /* => #9e3f3f */
darken/lighten ($mainColor, 10%);
...

Jak widać SCSS posiada ogromne możliwości i tak naprawdę to tylko od nas zależy w jakim stopniu go wykorzystamy. Można na początek wydawać się trudy i zawiłym językiem, ale tak naprawdę ułatwia, przyśpiesza, automatyzuję pracę każdego programisty.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code