Sass – Getting started

postat acum 3 ani de Stefanescu Mihai in categorie Sass si Scss

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.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!

Comentariu postate de g la data de 13.05.2019
It's a pity you don't have a donate button! I'd definitely donate to this superb blog! I suppose for now i'll settle for bookmarking and adding your RSS feed to my Google account. I look forward to new updates and will talk about this site with my Facebook group. Chat soon!
Comentariu postate de how to download minecraft la data de 14.05.2019
Greetings from California! I'm bored to tears at work so I decided to browse your blog on my iphone during lunch break. I really like the knowledge you provide here and can't wait to take a look when I get home. I'm surprised at how quick your blog loaded on my phone .. I'm not even using WIFI, just 3G .. Anyhow, fantastic blog!
Comentariu postate de nike jordans la data de 15.05.2019
My spouse and i felt really cheerful Peter could deal with his inquiry because of the ideas he came across through your weblog. It's not at all simplistic to simply always be releasing tips that many the others might have been selling. So we already know we now have the website owner to appreciate because of that. The most important illustrations you've made, the simple site menu, the friendships you will aid to promote - it's got most remarkable, and it's facilitating our son and us recognize that that issue is thrilling, which is certainly wonderfully indispensable. Thanks for the whole lot!
Comentariu postate de minecraft free la data de 15.05.2019
When someone writes an paragraph he/she keeps the idea of a user in his/her brain that how a user can understand it. Therefore that's why this article is outstdanding. Thanks!
Comentariu postate de how to download minecraft la data de 17.05.2019
Hi! Someone in my Myspace group shared this website with us so I came to look it over. I'm definitely loving the information. I'm book-marking and will be tweeting this to my followers! Fantastic blog and brilliant style and design.
Comentariu postate de mojang minecraft download la data de 17.05.2019
My family always say that I am wasting my time here at web, except I know I am getting familiarity all the time by reading thes pleasant articles.