Sass – Getting started

Sass si Scss | Stefanescu Mihai | 2020-10-11

In 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.



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

🗝ïļ Login 🌟 Register

🔖 Bookmarks ⊞
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord ⊞

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.

⮆ïļ