Sass – Getting started
Stefanescu Mihai 3 years ago Sass si ScssIn aceasta serie de tutoriale am sa va vorbesc despre sass, un preprocesor pentru CSS ce ne va ajuta sa scriem si sa modificam CSS-ul mult mai usor.
Pentru inceput am sa va povestesc putin despre ce ne ofera acest sass. Unul dintre cele mai importante lucruri oferite de sass sunt variabilele.
Probabil va intrebati la ce ne folosesc variabilele in CSS? Ei bine, sa presupunem ca avem de facut un site su mai multe noante de alabastru, totul functioneaza perfect pana acum…dar daca la un moment dat va trebuii sa schimbam acele nuante de albastru cu niste nuante de verde? Ctrl + F, inlocuim prima noanta peste tot, Ctrl + F si inlocuim a doua nuanta, si tot asa? Nu ar fi mai simplu sa schimbam intr-un singur loc?
Hai sa nu mai pierd vremea despre ce am de gand sa va prezint mai tarziu oricu si sa incep sa va povestesc despre instalare.
Primul lucru de care aveti nevoie pentru sass este ruby. Pentru a-l obtine nu trebuie decat sa intrati pe acest website: http://rubyinstaller.org/ si descarcati installerul, il deschide-ti si urmati pasii (Next, Next…Finish, o chetsie cat se poate de obisnuita). Daca sunteti pe windows probabil o sa fie necesar sa setati PATH-ul catre ruby, iar pentru a face asta nu trebuie decat sa da-m click dreapta pe My Computer > Properties > Advanced system settings > Environment Variables , aici la System Variables cautam Path, dam edit pe el si scriem la sfarsitul sirului de caractere acest cod:
;C:\Ruby22\bin;
Acum, pentru a verifica daca totul functioneaza cum ar trebuii deschidem cmd-ul si scriem urmatoarea comanda:
ruby -v
Acum, daca totul s-a instalat cum trebuia ar trebuii sa vedeti urmatorul mesaj:
Acum, pentru a instala sass rulam urmatoarea comanda:
gem install sass
Pentru a verifica daca totul a decurs corect rulam comanda:
sass -v
Daca vedem urmatorul mesaj inseamna ca avem sass instalat si putem merge mai departe:
Gata, acum ca am terminat cu instalarea ruby si sass putem sa ne apucamd e treaba.
inca de la inceput trebuie sa va anunt ca browserele nu “inteleg” sass sau scss, ci doar CSS, de aceea mai devreme am spus ca sass este un preprocesor pentru CSS, pentru ca dupa scriem codul SASS/SCSS il vom compila intr-un fisier CSS.
In acest articol va mai arat un singur lucru si continuam in urmatorul.
Mi-am creat un folder nou pe desktop numit ‘Tutorial Sass’ in care am un fisier HTML index.html si un folderstyle cu un fisier style.scss, ce trebuie sa facem pentru a compila acest fisier?
Din cmd navigam in folder-ul cu cu fisierul sass folosind comanda cd, iar apoi pentru a compila fisierul scss rulam comanda:
sass --watch fisier_sass.scss:fisier_css.css
Iata cum arata cmd-ul meu in urma rulari acestor comenzi:
Nu trebuie sa rulati aceasta comanda dupa fiecar schimbare in fisierul scss, doar lasati cmd-ul pornit si de fiecare data cand faceti o modificare in fisier si salvati aceasta va fi detectata si va compila automat fisierul.
