Introducere în SASS - instalare și noțiuni de bază

⋅ 19 mai 2017
Am vorbit în articolul trecut despre ce sunt preprocesatoarele CSS și pe care să-l alegi, SASS sau LESS. În acest articol vei afla cum să instalezi SASS, ce sintaxă SASS să alegi, SCSS sau vechiul SASS, și îți vor fi prezentate și exemplificate caracteristicile preprocesatorului CSS SASS.

Introducere în SASS - instalare și noțiuni de bază

Înainte de a porni, mai trebuie menționat că SASS, ca și LESS, este o extensie a CSS și, prin urmare, pentru a-l putea întrebuința efectiv, va trebui să scrii cod CSS, în rest, acesta oferă un limbaj de scripting foarte ușor de învățat și folosit, cu un număr mic de elemente noi, însă care oferă numeroase noi perspective în dezvoltarea front-end.

Pentru testarea rapidă a exemplelor prezentate, poți converti cod SASS în CSS folosind aplicații web precum https://sass.js.org/, https://.sassmeister.com/ ș.a.

Instalare și folosire SASS


SASS a fost dezvoltat în Ruby (și ulterior extins și pe alte platforme), deci, dacă ai instalat Ruby în sistem, vei putea instala și folosi și librăria SASS din cadrul linei de comandă. Vezi cum în tutorialul de aici (în engleză).

Cea mai facilă metodă de a folosi SASS este prin instalarea unui program care are funcția de a compila codul SASS în cod CSS, evitându-se astfel executarea de comenzi și eventual instalarea Ruby. Astfel de programe există atât în variantă gratuită, cât și contra cost.

În continuare, voi exemplifica modalitatea de a compila fișiere SASS prin intermediul programului Scout-App - program gratuit (open-source chiar) compatibil cu Windows, Linux și Mac OS X. Pentru început, descarcă și rulează programul – acesta este în versiune portabilă, deci nu va fi nevoie să-l instalezi.

Program de compilare SASS în CSS
Interfață Scout-App - program de transformare SASS în CSS.

Mai departe va trebui să creezi un proiect SASS – mai exact, va trebui să specifici două foldere:
  • folderul de intrare: în care există fișierele tipice SASS (care pot include și fișiere CSS) sau în care vor fi adăugate fișiere de acest tip ulterior;
  • folderul de ieșire: în care se va scrie codul rezultant CSS, compilat din SASS.

Dă clic pe File → New Project și alege locația către cele două foldere – care trebuie să fie diferită; în plus, un folder ales nu trebuie să fie un subfolder al celuilalt folder selectat.

Tot în cadrul ferestrei de configurare a proiectului mai poți alege și modul în care să se facă conversia codului în CSS - secțiunea Environment. Opțiunile posibile în acest sens sunt următoarele:
  • Nested: proprietățile sunt delimitate fiecare pe linie și se respectă indentarea acestora în funcție de gradul de încuibare – ce permite parcurgerea structurii CSS-ului rezultant cu ușurință.
  • Expanded: proprietățile și regulile SASS sunt delimitate pe linie, însă elementele încuibate nu sunt indentate.
  • Compact: proprietățile fiecărui selector sunt definite pe o singură linie.
  • Compressed: întregul cod CSS este scris pe o singură linie – util pentru reducerea codului, înainte de a fi livrat.

Pentru a compila fișierele .scss din folderul de intrare apasă pe butonul Play afișat în dreptul numelui de proiect. Fișierele SASS vor fi compilate în folderul de ieșire, iar toate modificările făcute fișierelor SASS vor fi compilate automat, deci nu va mai trebui să apeși pe butonul Play de fiecare dată când dorești compilarea codului.

Sintaxa SCSS versus sintaxa SASS


SASS (preprocesatorul CSS) suportă două tipuri de sintaxe, SASS (sintaxa standard, identificată prin extensia .sass) și SCSS (o sintaxă apărută mai recent, identificate prin extensia .scss ). Ambele aparțin de preprocesatorul SASS și furnizează aceleași caracteristici, diferența între cele două fiind doar de sintaxa.

Mai exact, sintaxa SCSS-ului este asemănătoare CSS-ului, adică:
  • se folosește acoladele pentru definirea de blocuri de definiții;
  • se folosește caracterul punct și virgulă pentru delimitarea definițiilor CSS.

În SASS, nu se folosește punct și virgulă și nici acolade, ceea ce, pe de-o deoparte contribuie la urmărirea mai facilă a codului pentru dezvoltatorii care folosesc limbaje de programare care nu folosesc astfel de caractere de delimitare, de exemplu Ruby; însă, pe de altă parte, face ca codul să fie dificil de parcurs pentru dezvoltatorii obișnuiți deja cu CSS (sau cu multe alte limbaje de programare în care există astfel de elemente de delimitare) și nici nu permite o explicitare la fel de exactă precum în cazul SCSS-ului.

În plus, un fișier CSS este acceptabil în sintaxa SCSS, însă în sintaxa SASS acest lucru nu mai e valabil.

Exemplu SCSS vs SASS pentru același cod
/* SCSS */
$blue: #3bbfce;
$margin: 14px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

/* SASS */
!blue: #3bbfce
!margin: 14px

.content-navigation
  border-color: !blue
  color: darken(!blue, 9%)

.border
  padding: !margin / 2
  margin: !margin / 2
  border-color: !blue

Rezultat CSS: 
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 7px;
  margin: 7px;
  border-color: #3bbfce;
}

În continuare, pe parcursul acestui articol, se va folosi doar sintaxa SCSS.

Dacă se dorește migrarea codului la cealaltă sintaxă, se poate folosi comanda sass-convert, în Ruby.

Declararea de variabile


Variabilele sunt identificatori ai unor valori care pot exista în CSS, valori care pot fi ulterior folosite de multiple ori în cadrul unui fișier SCSS prin intermediul identificatului, evitându-se astfel introducerea de mai multe ori a unei aceleiași valori. În SCSS, definirea unui variabile se face prin intermediul caracterului $.

Exemplu SCSS:
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
.content {
  font: 100% $font-stack;
  color: $primary-color;
}

Rezultat CSS:
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
.content{
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Folosirea variabilelor este utilă pentru că:
  • reduce cantitatea de cod care trebuie introdusă de dezvoltator;
  • în cazul modificării ulterioare a codului CSS, nu va mai fi necesară modificarea unei aceleiași valori în cadrul mai multor selectori CSS, ci doar modificarea unei variabile;
  • se permite un control mai mare asupra designului, datorită operatorilor matematici, care pot fi folosiți și pentru a aplica un efect de tranziție, de exemplu de scădere / creștere a dimensiunii fontului, a intensității unei culori ș.a. (mai multe despre acest lucru găsești în secțiunea operatorilor matematici).

Încuibarea selectorilor (nesting)


Permite plasarea selectorilor în cadrul altor selector – cu alte cuvinte, încapsularea selectorilor care fac referire la o aceeași zonă din pagină, fiecare selector fiind folosit în contexte diferite. Încuibarea permite deci crearea de stilizări ierarhice, ușor de urmărit și de organizat de dezvoltator, asemănător limbajului HTML, favorizând ușurința în stilizare a selectorilor.

Încuibarea selectorilor într-o ierarhie ce depășește 6 pași este considerată o practică negativă, ducând la crearea unei înșiruiri mari de selectori după compilare – ceea ce duce la creșterea dimensiunii fișierelor CSS rezultante, dar și la creșterea dificultății de aplicare a codului CSS.

Exemplu SCSS (a se observa plasarea acoladelor):
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Rezultat CSS:
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Importarea de fișiere SASS


SASS permite modularizarea codului CSS astfel încât zone diferite ale codului să poată fi separate în fișiere diferite – astfel de fișiere purtând numele de parțiale. Orice fișier definit cu underline („_”) înaintea unui nume de fișier cu extensia .scss este considerat de SASS un fișier parțial.

Exemple de fișiere parțiale: „_reset.scss”, „_variabile.scss”.

Împărțirea codului CSS în multiple zone este benefică pentru că se permite astfel o mai bună structurare și ierarhizare a codului, deci acesta va deveni mai ușor de accesat, înțeles și modificat. În plus, se poate separa partea dinamică, în care sunt definite variabile, de partea statică, în care există stilizarea propriu-zisă (care conține variabile), facilitând creșterea gradului de actualizare și mentenanță a codului.

Orice fișier parțial SCSS poate fi important folosind operatorul @import.

Sintaxa de folosire a operatorului este următoarea: @import 'nume_parțial';

 Exemplu: @import 'reset'; (numele parțialului nu trebuie să includă și caracterul underline din fața numelui de fișier).

Operația de importare va copia conținutul fișierului parțial în fișierul curent, rezultatul fiind o îmbinare a celor două fișier SCSS – eventual a mai multora –, rezultând un singur fișier CSS.

Funcții (mixin-uri)


SASS permite definirea de funcții asemănătoare celor din cadrul limbajelor de programare, prin care se pot defini algoritmi de generare de cod CSS, pe baza unor valori transmise ca parametrii.

Definirea unui mixin se face prin intermediul operatorului @mixin, urmat de un nume de identificare al acestuia și o serie de parametrii separați prin virgulă și încadrați între paranteze rotunde.

Sintaxă: @mixin NumeMixin($parametru1, $parametru2){cod CSS ce folosește parametrii dați}.

Apelarea unei astfel de funcție se face prin operator @include, urmat de numele funcției și de parametrii, separați prin virgulă și delimitați între paranteze rotunde.

Sintaxă: @include NumeMixin(valoare_parametru1, valoare_parametru2);

Exemplu SCSS:
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Rezultat CSS:
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Adițional, se poate crea funcții care au menirea de a returna o valoare și nu de a genera cod CSS, așa cum este în cazul anterior.

Exemplu SCSS:
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Rezultat CSS:
#sidebar {
  width: 240px; }

Extinderea / preluarea de cod CSS


Această caracteristică permite preluarea de cod CSS definit pentru un selector și folosirea acestuia într-un alt selector, deci o extinderea rapidă a codului. Utilitatea acestei caracteristici este evidentă, dezvoltatorul nu va mai trebui să rescrie cod identic cu al unui alt selector, ci îl poate prelua direct.

Mai mult decât atât, se poate chiar optimiza codul CSS, astfel încât să existe un număr mare de selectori creați prin îmbinarea altor selectori. Pentru preluarea definițiilor CSS dintr-un selector trebuie să se folosească operatorul @extend, urmat de selectorul de unde se dorește a se prelua codul CSS.

Exemplu SCSS:
.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;
}

Rezultat CSS:
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Efectuarea de operații matematice


SASS permite definirea de operații matematice direct în cod, lucru care permite un grad mare de exactitate în definirea de valori numerice, respectiv culori. Totodată, se permite o sincronizare a variatelor secțiuni ale site-ului, chiar dacă se modifică ulterior anumite aspecte ale stilizării.
De exemplu, se poate alege ca culoare de background dintr-o secțiune a site-ului să fie mai deschisă cu un anumit nivel decât o altă culoare – prin incrementarea / decrementarea culorii de bază.

Exemplu SCSS:
$culoareInchisa: #111111;
$culoareDeschisa: $culoareInchisa + #555555;
background-color: $culoareDeschisa;

Rezultat CSS:
background-color: #666666;

Exemplu 2 SCSS:
.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Rezultat 2 CSS:
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Operatorul de referire la selectorul părinte


Caracterul & permite referirea la selectorul părinte, facilitând astfel creșterea gradului de reutilizare al codului, dezvoltatorul putând prelua cod dintr-o secțiune și a-l aplica într-o alta fără modificări (în ceea ce privește numele de selector).

Exemplu:
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

Va rezulta în:
main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

***

Informațiile expuse în acest articol reprezintă noțiunile de bază ale limbajului de scripting SASS. Pe lângă acestea, mai există și anumite elemente care trebuie să fie cunoscute pentru a putea folosi SASS la capacitatea maximă, în speță structurile repetitive și condiționale, funcțiile disponibile, plus alte directive și operatori care nu au fost prezentați în acest articol. Documentația completă (în engleză) o poți găsi pe site-ul oficial, la acest link.

Dacă ai cunoștințe de bază în CSS, cu siguranță că introducerea în SASS a fost una rapidă și ești pregătit să utilizezi SASS.

Dacă ai vreo nelămurire cu privire la informațiile din articol sau dorești să aduci informații auxiliare, lasă un comentariu mai jos.

Citește și:
Ce este web 3.0
Cum instalezi și folosești platforma Wordpress local (pe calculatorul personal)
Ce aduce nou HTTP/2 - noul protocol al webului