Introducere la SASS CSS

Ce este SASS?

Este un pre-procesor CSS (extensie CSS) care permite utilizarea unui limbaj mult mai puternic si inteligent decat simplul CSS. Odata ce este compilat acesta va genera fisierul CSS care va putea fi folosit pentru aplicatia web in mod normal. Alternativele la Sass sunt: Less si Stylus si acestea fiind utilizate pentru acelasi scop.

SASS – Syntactically Awesome Style Sheets – poate fi utilizat de cei care au cunostinte de baza de CSS si preferabil, dar nu obligatoriu, de programare.

Avantajele utilizarii pre-procesorilor

Obtinem un cod mult mai mantenabil prin reducerea repetitiilor si posibilitatea utilizarii unor functii specifice unui adevarat limbaj de programare.

Instalarea SASS

Pentru a putea utiliza SASS trebuie sa avem instalat Ruby pe caluculatorul nostru. Daca folosim un Macintosh cu un sistem operativ OS X atunci avem acest limbaj instalat deja.

Pentru Windows vom merge la acest link pentru a descarca Ruby Installer si mai apoi vom parcurge instructiunile de instalare pe care le gasim in pagina dedicata de pe site-ul limbajului SASS. In alternativa putem folosi aplicatiile gratuite ce contin Sass – o lista a acestora o putem gasi tot in pagina de mai sus.

Utilizare SASS

Elementele in limbajul HTML sunt supuse unei ierarhii clare – acestea fiind imbricate. Acelasi concept il regasim si in Sass.

Exemplu:

Pentru acest cod HTML:

<nav class="menu">
<ul>
<li><a href="index.php">Acasa</a></li>
<li><a href="despre.php">Despre Noi</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>

Vom avea urmatorul cod SASS:

.menu {
float: left;
li {
display: inline-block;
list-style-type: none;
padding: 10px;
}
a {
display: block;
text-decoration: none;
color: #333;
}
}

Din acest cod SASS vom avea urmatorul output compilat CSS:

.menu {
float: left; }
.menu li {
display: inline-block;
list-style-type: none;
padding: 10px; }
.menu a {
display: block;
color: #15D1DB;
}

Aici vedem diferenta dintre cele doua si mai ales observam cum acest limbaj ne ajuta sa evitam repetitiile:

Acest limbaj ne pune la dispozitie foarte multe optiuni pentru a ne simplifica modul de scriere a codului CSS:

–       putem folosi VARIABILE – Ex: daca avem un set de culori pe care il folosim pentru proiect le putem defini cu ajutorul variabilelor pentru a evita rescrierea de mana si repetarea culorilor in foia de stil:

$white: #ffffff;
$navigation: #537890;
.navigation {
background-color: $navigation;
a { color: $white; }
}

Utilizarea variabilelor nu se margineste la culori, le putem utiliza si pentru familii de font-uri, pentru margini si padding-uri, dar si pentru border-radius, umbre ale elementelor etc

– putem importa potiuni de cod cu @import direct in interiorul fisierului fara a genera o cerere HTTP;

– putem folosi operatiile matematice standard (+, -, *, /, %) in fisierul de stil pentru a calcula de exemplu largimea elementelor din DOM , etc.

Acestea sunt doar cateva exemple ale modului in care putem simplifica scrierea regulilor de stil. La acest link pe site-ul oficial al limbajului Sass se poate gasi un ghid cuprinzator cu exemple in ceea ce priveste sintaxa.

SCSS si SASS

Fisierele nostre SASS pot avea fie extensia .scss cat si extensia .sass. Sintaxa suportata de aceste doua limbaje prezinta anumite diferente. In acest articol gasim principalele diferente dintre cele doua sintaxe.

In articolul de fata am facut referinta la sintaxa SCSS.

Compilarea fisierelor

Inceperea lucrului cu sass prevede crearea a doua fisiere cu acelasi nume si cu extensii diferite in acest mod: style.scss si style.css.

Compilarea se poate realiza fie cu ajutorul comenzilor directe catre sistemul operativ fie cu ajutorul variilor aplicatii pe care le putem descarca gratuit de pe pagina oficiala a limbajului Sass.

Pentru exemplul din acest articol vom folosi aplicatia Koala, ce poate fi descarcata in mod gratuit.

Odata ce am adus dosarul cu cele doua fisiere create anterior: style.scss si style.css in interiorul aplicatiei vom selecta optiunea Compile iar aplicatia va compila fisierul style.css in baza instructiunilor pe care le-am scris in interiorul fisierului style.scss sau a fisierului style.sass.

SASS si LESS in Dreamweaver CC 2014

Odata cu noul release Dreamweaver CC 2014 avem posibilitatea de a scrie si gestiona fisierele Sass si Less in interiorul programului. In acest caz extensia fisieruui creat automat de catre program este .sass si deci in acest caz va trebui sa utilizam sintaxa specifica sass. Daca preferam sintaxa .scss atunci va trebui sa schimbam extensia fisierului creat de catre Dreamweaver.