Preprocesoare pentru CSS


Atat preprocesorul Sass cat si Less sunt compatibile cu CSS-ul normal, asta inseamnand ca iti poti converti fisierele CSS existente in Sass sau Less doar mutand continutul intr-un fisier sass sau less. Hai sa vedem cum putem folosi o variabila in Sass sau Less. Presupunem ca lucram la un proiect ce are nevoie de mai multe culori, ce iti vei aminti mai usor albastru sau #406fa9 ? Ei bine, mie imi pare ca este mai greu sa iti amintesti un cod HEX decat numele unei variabile.

Exemplu SASS
$albastru: #406fa9;
$culoarecontur: #00000;
.elementulmeu{
    background: $albastru;
    border: 1px solid $culoarecontur;
}
Exemplu LESS


@albastru: #406fa9;
@culoarecontur: #00000;
.elementulmeu{
    background: @albastru;
    border: 1px solid @culoarecontur;
}
1.Dezvoltare mai rapida a aplicatiilor
Atat Sass cat si Less vin cu o multime de extensii ce ne ajuta la dezvoltarea aplicatiilor intr-un mod mai simplu si mai rapid. Sass se foloseste de extensia Compass pentru dezvoltare. Aceasta extensie vine cu mai multe Mixin-uri ce ne ajuta la scrierea de CSS3 intr-un mod mai rapid. In plus, vine cu feature-uri precum Typograpgy, image Spritesm s.a.m.d ce ne ajuta la controlarea output-ului CSS. De asemenea, Less ofera destule extensii similare cu Compass.
2.Erori
Cand  lucrezi la un proiect web foarte mare, chiar si cea mai mica greseala poate crea haos. Dar daca primim o notificare ce ne anunta ca ca avem o eroare si numarul liniei ne va usura viata foarte mult. Sass ne va afisa o notificare de fiecare data cand descopera o sectiune invalida de cod.
3.Documenatatia
Sass bedeficiaza de o documentatie destul de buna, dar cand am intrat prima data incercand sa invat cate ceva despre acest preprocesor am avut impresia ca exista chestii ce lipsesc de acolo. In cazul Less, situatia sta altfel...docuemtatia este mult mai clara si mai suor de inteles.
4.Operarii de baza
Atat Sass cat si Less poate efectua operatii matetmatice de baza. Dar, ambele returneaza rezultate diferite. Hai sa va arat asta folosind 2 exemple simple:

SASS

$margin: 12px;
div{
    margin: $margin – 12%; /*Syntax error: Incompatible units : ‘%’ and ‘px’ */
}

LESS

@margin: 12px;
div{
    margin: @margin – 12%; /* rezultatul va fi 0px */
}

Ambele preprocesoare sunt foarte populare si foarte folosite fiind 2 tool-uri ce ne pot usura viata ca si dezvoltatori. Desi ambele ofera mai mult sau mai putin acelasi lucru, in mod clar Sass este mai bun, dar asta nu inseamna ca Less este mai prost sau nefolositor, ci doar ca nu este mai bun ca sass.

Comentarii