Există deja o mulțime de articole despre SASS (SCSS), Less on Habrahabr, dar în opinia mea nu există suficient unul care să conțină puțină practică reală. Voi încerca să umplu acest gol. Cu aproximativ un an în urmă, unul dintre articolele SASS m-a „prins” și de atunci mi-a plăcut atât de mult această tehnologie, încât introducerea manuală a codului CSS obișnuit mi se pare o pierdere de timp. Acest articol este dedicat acelor designeri de layout (sau programatori web) care nu au auzit încă de SCSS sau nu l-au încercat încă în practică. Tovarășii mai experimentați, cred, nu au ce să prindă în asta.

Ce este SCSS

Diferența dintre SCSS și SASS este că SCSS este mai asemănător cu codul CSS obișnuit. Exemplu de cod SASS:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
Și același lucru pe SCSS:

$albastru: #3bbfce; $marja: 16px; .conținut-navigație ( chenar-culoare: $albastru; culoare: întunecat ($albastru, 9%); ) .border (padding: $margin / 2; margine: $margin / 2; chenar-culoare: $albastru; )
Am ales SCSS pentru că este mai ușor de înțeles pentru colegii care încă nu sunt familiarizați cu el. De asemenea, ar fi de remarcat faptul că codul CSS obișnuit se potrivește bine în sintaxa SCSS.

Instalare și utilizare

--ceas

Să presupunem că aveți următoarea structură de proiect:

Css ---- scss ------ style.scss ---- style.css
Este necesar ca sass să urmărească toate modificările în css/scss/* și să salveze rezultatul în css/*.css . În acest caz, rulați sass astfel: sass --watch css/scss:css/. . Acestea. sass --watch [ce]:[unde] .

--Actualizați

Este de remarcat faptul că, spre deosebire de Less, SASS nu știe cum să-și compila codul direct în browser. După părerea mea, această abordare (compilare pe un server sau un designer de layout PC) este singura corectă.

Practică

@import

Merită remarcat 1 nuanță. Dacă nu alimentați sass cu un anumit fișier sursă, ci cu un director, atunci fișierele CSS nu vor fi generate pentru fișierele care încep cu _ . Acestea. prezența unui fișier style.scss va avea ca rezultat crearea unui fișier style.css , dar prezența unui fișier _some.scss nu.

Deci, pentru a include conținutul fișierului _template.scss sau template.scss scriem

@import „șablon”; // șabloane
În cele din urmă, în loc de 1 fișier style.css mare, am ajuns să am mai mult de o sută de fișiere scss mici. La prima vedere, poate părea că această sumă este prea mare și va duce la un chin teribil. Cu toate acestea, găsesc fișierul de care am nevoie imediat pe baza structurii de directoare convenabile. În plus, cred că datorită stocării în cache, această „schemă” este mai performantă.

@cuibări

#unii ( chenar: 1px roșu continuu; .unii ( fundal: alb; ) ) /* => */ #unii ( chenar: 1px roșu continuu; ) #unii .unii ( fundal: alb; )
Alt exemplu:

Intrare ( chenar: 1px gri solid; fundal: alb; & ( culoare: negru; ) &.some_class ( display: none; ) ) ) /* => */ input ( chenar: 1px solid gri; fundal: alb; ) input ( culoare: negru ) input.some_class ( display: none; )
Caracterul & este echivalent cu selectorul părinte. Să spunem eticheta avem clasa ie_7 dacă avem Internet Explorer 7 ca browser. Următorul cod vă permite să scăpați de toate „hack-urile” și comentariile speciale:

$IE_7: „body.ie_7”; //... .some ( afișare: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .some ( display: inline-block; ) body.ie_7 .unele (zoom: 1; afișare: inline; )

$variabile

$unii:rosu;
Variabilele nu sunt constante, pot fi modificate pe măsură ce codul progresează :) Unul dintre primele mele gânduri a rezultat în fișierul _const.scss, care conține toate culorile de bază, dimensiunile fonturilor etc.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: negru; ...
Se presupune că culoarea linkurilor de pe site este $link .

A ( culoare: $link; ) span.link ( culoare: $link; text-decor: subliniere; )
Dacă mai târziu se dovedește că culoarea legăturilor s-a schimbat, este suficient să schimbați 1 variabilă (în cazul CSS, ar trebui să înlocuiți automat fișierele, poate chiar selectiv). Să presupunem că, dintr-o dată, se dovedește că în unele module de contacte, culoarea legăturilor este diferită. Există cel puțin două soluții.

$contacts_link: portocaliu; // codul modulului folosind $contacts_link în loc de $link
Al doilea

$__link: $link; $link: portocaliu; // cod modul $link: $__link;
Variabilele noastre nu sunt tastate, deci pot conține la fel de bine șiruri, numere și culori.

@matematică

Bloc ( $block_width: 500px; umplutură: 5px; chenar: 1px negru solid; lățime: $block_width - (5px * 2) - (1px * 2); )
Dacă doriți, puteți seta și umplutura cu chenar folosind variabile. Totul depinde de complexitatea aspectului.

Alt exemplu:

Bloc ( $număr: 10; $margin_left: 5px; $all_width: 1000px; lățime: $all_width; .sub_element ( lățime: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; ) )
Aș dori să notez că acest tip de manipulările sunt folosite foarte des. Fără ele sunt ca și fără picioare.

Și acum culorile. Culorile pot fi adăugate și multiplicate:

Unele ( $culoare: #010203; culoare: $culoare; chenar-culoare: $culoare - #010101; &:hover (culoare: #010203 * 2; ) ) /* => */ .unele (culoare: #010203; border-color: #000102 .some:hover (culoare: #020406; )
Un lucru destul de la îndemână atunci când ești prea leneș să alegi culori. Sunt disponibile, de asemenea, funcții precum opacify și transparentize (mai mult

Care este necesar pentru a compila codul pe preprocesoarele SASS și LESS. Să vedem cum să lucrăm cu preprocesorul SASS.

Preprocesare

Scrierea CSS este distractivă în sine, dar când o foaie de stil devine uriașă, devine dificil de întreținut. Și în acest caz, preprocesorul ne va ajuta. SASS vă permite să utilizați funcții care nu sunt disponibile în CSS în sine, de exemplu, variabile, imbricare, mixuri, moștenire și alte lucruri frumoase care returnează confortul de a scrie CSS.

Odată ce începeți să utilizați SASS, preprocesorul vă prelucrează fișierul SASS și îl salvează ca un simplu fișier CSS pe care îl puteți utiliza pe orice site.

Variabile

Gândiți-vă la variabile ca pe o modalitate de a stoca informațiile pe care doriți să le utilizați pe parcursul scrierii fiecărui stil de proiect. Puteți stoca culori, stive de fonturi sau orice altele în variabile Valori CSS pe care doriți să le utilizați. Pentru a crea o variabilă în Sass, trebuie să utilizați simbolul $. Să ne uităm la un exemplu:

$font-stack: Helvetica, sans-serif; $culoare primară: #333; body ( font: 100% $font-stack; culoare: $primary-color; )

Când Sass este procesat, ia valorile pe care le-am stabilit în $font-stack și $primary-color și le inserează în fișierul CSS obișnuit în locurile în care am specificat variabilele ca valori. Astfel variabilele devin cea mai puternică oportunitate, de exemplu, atunci când lucrați cu culorile mărcii utilizate pe tot site-ul.

Corp (font: 100% Helvetica, sans-serif; culoare: #333; )

Cuibări

Când scrieți HTML, probabil ați observat că are o ierarhie clară imbricată și vizuală. Acesta nu este cazul cu CSS.

Sass te lasă să cuibăreşti Selector CSS s în același mod ca în ierarhia vizuală HTML. Dar rețineți că imbricarea excesivă face documentul mai puțin lizibil și de înțeles, ceea ce este considerat o practică proastă.

Pentru a înțelege la ce ne referim, iată un exemplu tipic de stiluri de navigare pe un site web:

Nav ( ul ( marja: 0; padding: 0; list-style: none; ) li ( display: inline-block; ) a ( display: block; padding: 6px 12px; text-decoration: none; ) )

Ați observat că selectoarele ul, li și a sunt imbricate în selectorul de navigare? Aceasta este o modalitate excelentă de a vă face fișierul CSS mai lizibil. Când generați fișierul CSS, rezultatul va fi cam așa:

Nav ul ( marja: 0; umplutură: 0; stil listă: niciunul; ) nav li ( afișare: bloc inline; ) nav a ( afișare: bloc; umplutură: 6px 12px; decor text: niciunul; )

Fragmentare

Puteți crea fragmente de fișiere Sass care conțin fragmente mici de CSS care pot fi folosite în alte fișiere Sass. Aceasta este o modalitate excelentă de a vă face CSS modular și, de asemenea, mai ușor de întreținut. Un fragment este un fișier Sass simplu al cărui nume începe cu un caracter de subliniere, de exemplu, _partial.scss. Sublinierea dintr-un nume de fișier Sass îi spune compilatorului că este doar un fragment și nu trebuie compilat în CSS. Fragmentele Sass sunt incluse folosind directiva @import.

Import

CSS are o funcție de import care vă permite să împărțiți fișierul CSS în altele mai mici și să le faceți mai ușor de întreținut. Dar această metodă are un dezavantaj semnificativ: de fiecare dată când utilizați @import în CSS, se creează o altă solicitare HTTP în CSS. Sass ia ideea de a importa fișiere prin directiva @import, dar în loc să creeze o cerere HTTP separată, Sass importă fișierul specificat în directivă în cel în care este numit, adică. Rezultatul este un fișier CSS compilat din mai multe fragmente.

De exemplu, aveți mai multe fragmente de fișiere Sass - _reset.scss și base.scss. Și vrem să importăm _reset.scss în base.scss.

// _reset.scss html, body, ul, ol ( margin: 0; padding: 0; ) // base.scss @import "reset"; body ( font: 100% Helvetica, sans-serif; culoare de fundal: #efefef; )

Rețineți că folosim @import 'reset'; în fișierul base.scss. Când importați un fișier, nu trebuie să specificați extensia .scss. Sass este un limbaj inteligent și își va da seama de la sine. Când CSS-ul este generat, veți obține:

Html, body, ul, ol ( margine: 0; padding: 0; ) body ( font: 100% Helvetica, sans-serif; culoare de fundal: #efefef; )

Mixine (mixine)

Unele lucruri în CSS sunt destul de plictisitoare de scris, mai ales în CSS3, unde, pe lângă asta, de multe ori trebuie să utilizați un număr mare de prefixe de furnizor. Mixins vă permit să creați grupuri de declarații CSS pe care le veți folosi de mai multe ori pe site-ul dvs. Este bine să folosiți mixin-uri pentru prefixele de furnizor. Exemplu pentru raza de frontieră:

@mixin border-radius($raza) ( -webkit-border-radius: $raza; -moz-border-radius: $raza; -ms-border-radius: $raza; border-radius: $raza; ) .box ( @include border-radius(10px); )

Pentru a crea un mixin, utilizați directiva @mixin + numele mixin-ului. Ne-am numit mixin raza de frontieră. De asemenea, în mixin folosim variabila $radius în interiorul parantezei, permițându-ne astfel să trecem tot ce dorim în variabilă. După ce ați creat un mixin, îl puteți utiliza ca parametru CSS pornind apelul cu @include și numele mixin-ului. Când se compilează CSS, veți obține asta:

Casetă ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; )

Moştenire

Aceasta este una dintre cele mai utile caracteristici ale Sass. Folosind directiva @extend, puteți moșteni seturi de proprietăți CSS de la un selector la altul. Acest lucru vă permite să păstrați fișierul Sass „curat”. În exemplul nostru, vă vom arăta cum să stilați notificările de eroare, avertismente și succes.

Mesaj ( chenar: 1px solid #ccc; padding: 10px; culoare: #333; ) .success ( @extend .message; border-color: green; ) .error ( @extend .message; border-color: red; ) . avertisment ( @extend .message; culoarea chenarului: galben; )

Codul de mai sus vă permite să luați Proprietăți CSS din .message și aplicați-le la .succes, .error și .warning. În timpul compilării fișierului CSS, magia funcționează care vă va ajuta să evitați să scrieți clase inutile în elemente HTML. Rezultatul arată astfel:

Mesaj, .success, .error, .warning ( chenar: 1px solid #cccccc; umplutură: 10px; culoare: #333; ) .success (border-color: verde; ) .error (border-culoare: roșu; ) .warning (culoare chenar: galben; )

Operatori matematici

Folosirea matematicii în CSS este foarte utilă. Sass are câțiva operatori matematici standard, cum ar fi +, -, *, / și %. În exemplul nostru, facem niște calcule matematice simple pentru a calcula lățimea deoparte și a articolului.

Container ( lățime: 100%; ) articol ( float: stânga; lățime: 600px / 960px * 100%; ) deoparte ( float: dreapta; lățime: 300px / 960px * 100%; )

Am creat un simplu adaptiv grilă modulară, cu o lățime de 960 pixeli. Folosind operatori matematici, am luat datele rezultate cu valori de pixeli și le-am convertit în procente fără prea mult efort. CSS-ul compilat arată astfel:

Container ( lățime: 100%; ) articol ( plutitor: stânga; lățime: 62,5%; ) deoparte ( plutitor: dreapta; lățime: 31,25%; )

Exemplu practic:

În fișierul nostru HTML, avem nevoie doar de cod foarte simplu și de un link către fișierul CSS din folderul CSS al proiectului nostru.

Acesta este tot HTML-ul de care avem nevoie! Acum să trecem la Sass. Conectați-vă la editorul de text preferat și creați fișier nou, salvați-l în folderul sass și denumiți-l style.scss. Pentru a fi mai ușor, vom scrie totul în SCSS, pe care și Sass îl poate gestiona, iar SCSS nu este foarte strict cu începătorii. La începutul fișierului nostru vom scrie resetare de bază pentru HTML, importați pentru Compass și scrieți variabile de culoare pentru buton.

@import „busolă”; //Resetare simplă body, div, a ( margine: 0; padding: 0; chenar: 0; ) a (text-decor: none;) a:focus (contur: 0;) // Variabile de culoare $button-colour: #2e6bc6; $button-start: #37a0dc; $buton-stop: #2068a6; $border: #163861; $text-shadow: #06304b; //Hover colors $button-hover-colour: #2e7dc6; $button-hover-start: #3f9ff0; $buton-hover-stop: #2874a9; $focus-umbra: #0b3c5f; //Stiluri de corpuri de bază (familie de fonturi: „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, sans-serif; )

În partea de sus a fișierului, numim Compass pentru a o include în fișier și a folosi clasele abstracte mai târziu. În plus, am scris o resetare simplă și am folosit deja o proprietate: variabile. Acest lucru ne oferă posibilitatea de a stoca valori pe care le vom folosi constant în CSS-ul nostru, inclusiv culori, valori de font și multe altele! Aici le folosesc pentru a stoca culorile folosite în buton și pentru a simplifica notația, precum și reutilizareîn foaia de stil.

Atribuirea stilurilor unui buton

Să stilăm acest buton! Vom începe prin a aplica stiluri de bază etichetei de clasă de butoane. Am setat câteva stiluri de bază de butoane aici și am observat cum folosesc variabilele.

Acum să trecem la partea distractivă! Îți amintești de importul Compass plasat la începutul foii de stil? O vom folosi aici, deoarece Compass are o bibliotecă mare de clase încorporate care includ prefixe CSS3 pentru acele browsere care încă au nevoie de suport pentru prefixe.

Buton ( lățime: 158px; înălțime: 30px; marjă: 120px automat; dimensiunea fontului: 16px; greutatea fontului: bold; text-align: center; afișaj: bloc; culoare: #fff; umplutură: 7px 0 0; chenar: 1px solid $border: 0 -1px 0 $text-shadow: relativă //Clasele de busolă @include background($button-color-gradient (sus, $button-start); stop)); @include border-radius (3px) ;

După definirea inițială a stilurilor, putem include mai multe clase abstracte pentru culorile de fundal, gradienți liniari, razele cadrului și tranzițiile. Cel mai bun lucru este că totul se va compila doar cu prefixele necesare și ne va economisi timp să le scriem! Clasa se va compila pentru moment în fișierul style.css în următoarele:

Buton ( lățime: 158px; înălțime: 30px; marjă: 120px automat; dimensiunea fontului: 16px; greutatea fontului: bold; text-align: center; afișaj: bloc; culoare: #fff; umplutură: 7px 0 0; chenar: 1px solid #163861; text-shadow: 0 -1px 0 #06304b poziție: relativă: #2e6bc6 -webkit-gradient(liniar, 50% 0%, 50% 100%, color-stop (20%, #37a0dc); ), color-stop (100%, #2068a6); fundal: #2e6bc6 -webkit-linear-gradient (sus, #37a0dc 20%, #2068a6: #2e6bc6 -moz-linear-gradient (sus, #); 37a0dc 20%, #2068a6; fundal: #2e6bc6 -o-linear-gradient (sus, #37a0dc 20%, #2068a6); -border-radius: 3px -moz-border-radius: 3px -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -tranziție: toate 0.3s ușurință; tranziție: toate 0.3s ușurință; )

Stiluri de scriere cu elemente imbricate

O altă caracteristică excelentă a unui preprocesor precum Sass este capacitatea de a imbrica elemente și de a atașa clase cu un element părinte căruia îi atribui stiluri. Acesta este apoi compilat în CSS-ul necesar pentru a funcționa.

Buton (&:hover ( @include fundal($button-hover-colour linear-gradient(sus, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inserție 0 1px 1px rgba(#fff, 0.95)); &:activ ( @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); text-shadow: 0 1px 0px $text-shadow; @ include box-shadow(inserție 0 2px 8px $focus-shadow) )

După stilurile de butoane principale, puteți imbrica selectoare de pseudo-clase pentru stările :hover și :active ale elementului, folosind un ampersand care îi spune lui Sass că aceasta este o clasă imbricată atașată elementului părinte. Starea de trecere cu mouse-ul poate adăuga un pic de dramă gradientului și umbrei interioare folosind clase abstracte Compass, în timp ce starea activă inversează gradientul și schimbă umbra casetei pentru a face să pară ca un buton a fost apăsat.

Buton:hover ( fundal: #2e7dc6 -webkit-gradient(liniar, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); fundal: #2e7dc6 -webkit-linear-gradient(sus, #3f9ff0 20%, #2874a9); fundal: #2e7dc6 -moz-linear-gradient(sus, #3f9ff0 20%, #2874a9 (sus, #3f9ff0 20). %, #2874a9); fundal: #2e7dc6 linear-gradient (sus, #3f9ff0 20%, #2874a9: -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.95); box-shadow: inserție 0 1px 1px rgba(255, 255, 255, 0.95); , color-stop(100%, #2068a6)); fundal: -webkit-linear -gradient(jos, #37a0dc 20%, #2068a6: -moz-linear-gradient(jos, #37a0dc 20%); 2068a6); fundal: -o-linear-gradient (jos, #37a0dc 20%, #2068a6); -webkit-box-shadow: inset 0 2px 8px #0b3c5f; -moz-box-shadow: insert 0 2px 8px #0b3c5f; box-shadow: inserție 0 2px 8px #0b3c5f; )

Cele de mai sus arată ce se întâmplă după ce stările :active și :hover sunt compilate în Sass; sunt scrise ca selectoare de pseudo-clasă pentru elementul părinte în CSS acționabil, precum și CSS-ul de care avem nevoie, complet cu alternative, pentru a finaliza butonul nostru cu trei stări.

style.scss și foaia de stil compilată

Asta este tot ce există în întregul nostru fișier style.scss, pentru că este organizat, scris simplu și conține clase și variabile abstracte care fac o parte din munca pentru noi și sunt apoi compilate în fișierul final de foaie de stil, style.css.

Salutare tuturor! Cât de repede zboară timpul. Nici nu am observat cum am trecut de la stilurile de scriere de la Css obișnuit la preprocesorul Sass. Dar nu am înțeles înainte - ce fel de Sass este, pentru ce este nevoie, probabil este pentru profesioniști super avansați în aspect. Da, folosirea preprocesoarelor este un pas înainte nou nivelîn dezvoltarea web, dar nu este nimic înfricoșător sau complicat aici și vei vedea singur după ce ai citit Acest articol a se termina.

Deci, ce este bun la preprocesor și în special la Sass? Voi spune imediat că mai sunt și altele, precum Less, Stylus etc. Toate funcționează după același principiu, dar fiecare are propriile caracteristici. Sass a câștigat o mare popularitate în rândul profesioniștilor, făcând învățarea mult mai ușoară. Doar că, cu cât tehnologia este mai populară, cu atât comunitatea este mai mare și documentația este mai extinsă.

Preprocesoarele sunt concepute pentru a scuti dezvoltatorul de majoritatea sarcinilor de rutină atunci când scrie cod, crescând astfel viteza și calitatea muncii. Pe lângă preprocesoarele CSS, există și preprocesoare HTML, de exemplu, Pug (Jade).

Structura articolului

Documentație

Dezvoltatorul Sass este francezul Hugo Giraudel, care locuiește de ceva vreme în Germania. Desigur, documentația este în limba engleză, dar eu personal o înțeleg bine (este important să știu engleza tehnică). Dar există și o traducere în rusă. As recomanda totusi versiune în limba engleză, asta pentru a ne obișnui și a studia engleza din ce în ce mai profund. Dar nici cel rusesc nu este mai rău.

• Documentație în limba engleză: http://www.sass-lang.com
• Documentație rusă: https://sass-scss.ru

Compilarea Sass la Css

La fel de software Pentru a compila Sass în Css, folosesc pluginul Sass task manager. În general, Sass este o aplicație (Gem) a limbajului Ruby. Prin urmare, dacă doriți să faceți fără Gulp, atunci pentru a compila în Css va trebui să instalați platforma limbajului de programare Ruby. Nu vă voi arăta cum se face acest lucru acum, puteți citi despre asta pe site-ul oficial.

Sintaxă - Sass, Scss

Permiteți-mi să notez imediat că există 2 sintaxe pentru scrierea codului: Sass și Scss.

Sintaxa lui Sass diferă ușor de Scss. Scss arată mai mult ca normal cod css, iar Sass omite acoladele și punctele și virgulă dintre reguli. Există, de asemenea, diferențe în modul în care sunt scrise unele funcții și trebuie să fii atent la ce sintaxă alegeți. Extensii de fișiere pentru Sass − *.sass,și pentru Scss - *.scss. Sintaxa Sass este mai veche, iar Scss a venit mai târziu pentru a facilita învățarea începătorilor. Eu însumi am început să studiez acest preprocesor în Scss, a fost mai ușor de înțeles așa. Acum am trecut la Sass, este mai convenabil pentru mine.

Dacă vorbim despre Sass, atunci structura sa de cod este construită pe baza indentărilor (la urma urmei, nu există acolade în ea) și ar trebui să fii atent aici, deoarece atât un tabulator (TAB - 4 spații) cât și spații obișnuite ( de obicei este un spațiu dublu). Eu folosesc întotdeauna un tabulator.

Tine minte! Dacă utilizați o filă ca indentare, atunci spațiile ar trebui excluse, astfel încât totul să fie la fel. Și invers - dacă utilizați spații, atunci tabulatorul ar trebui exclus. În caz contrar, compilatorul va arunca o eroare.

Sass

Scss

În majoritatea editorilor de cod (de exemplu, Text sublim) există marcaje de indentări sub formă de dungi, ceea ce ne împiedică să ne confundăm. În exemplele de mai jos voi folosi sintaxa Sass.

Simplifică-ți viața cu Sass

Imbricarea regulilor

Asta mi-a plăcut la Sass de la bun început, a fost tocmai imbricarea regulilor CSS una în alta. Acest lucru economisește mult timp, iar codul este structurat și ușor de citit. De exemplu, dacă dorim să scriem stiluri pentru elementele unui anumit container părinte, atunci în Css trebuie să specificăm de fiecare dată clasa părinte, de exemplu astfel:

.title principal (dimensiunea fontului: 30px; culoare: #444; ) .subtitle principal (dimensiunea fontului: 20px; ) .descrierea .principală (dimensiunea fontului: 14px; marginea inferioară: 30px; )

Adică specificăm clasa părinte.principal peste tot, iar acest lucru, la rândul său, nu este în întregime convenabil. Folosind Sass, îl puteți scrie astfel:

Scss

Sass

De acord, arată mult mai îngrijit și poți scrie codul mai repede, deoarece scriem class.main părinte o singură dată. Dacă doriți să mă urmăriți fără a instala Ruby și orice software similar, puteți utiliza compilatorul online pentru o demonstrație.

Proprietăți imbricate

În plus față de regulile de cuibărit în Sass, există posibilitatea unor proprietăți de cuibărit. De exemplu, iată cum să scrieți valorile marjelor:

Sass

Css

Selector de legare sau concatenare - & semn

Putem grăbi scrierea codului și îl putem face și mai compact utilizând concatenarea (conexiunea) folosind simbolul - & . Cum functioneaza? De exemplu, avem clase precum: .main-title, .main-subtitle, .main-description. În Sass, aceste clase pot fi scrise după cum urmează:

Dimensiunea fontului principal &-titlu: 30px Culoare: #444 Dimensiunea fontului &-subtitle: 20px Dimensiunea fontului &-descrierea: 14px margin-bottom: 30px

Titlu principal (dimensiunea fontului: 30px; culoare: #444; ) .subtitrare principală (dimensiunea fontului: 20px; ) .descrierea principală (dimensiunea fontului: 14px; margin-bottom: 30px; )

Folosind un simbol & ne conectăm la clasa rădăcină, adică în acest caz nu este nevoie să repetăm ​​constant root.main . În același timp, rețineți că nu am creat niciun element copil.

/* Link */ a ( culoare: roșu; ) a:hover ( culoare: albastru; ) /* Pseudo-elemente */ .main::before ( conținut: ""; afișare: bloc; dimensiunea fontului: 20px; ) .main ::after (conținut: ""; afișare: bloc; dimensiunea fontului: 30px; )

Uneori trebuie să specificați un lanț de selectori până la elementul curent. Puteți, desigur, să o mutați la rădăcină, dar pentru a nu rupe cuibărirea, o puteți scrie după cum urmează:

.container principal și lățime: 700px

Container.main (lățime: 700px)

Prin mutare & după selector, am schimbat ordinea de andocare, adică class.container în acest caz este părintele.

Legare la selectorul părinte, dar cu un nivel mai sus

Mai sus, ca exemplu, am demonstrat codul Sass:

Dimensiunea fontului principal &-titlu: 30px Culoare: #444 Dimensiunea fontului &-subtitle: 20px Dimensiunea fontului &-descrierea: 14px margin-bottom: 30px

Acum imaginați-vă că în blocul .main-title există un alt element care trebuie să fie stilat în mod explicit folosind întregul lanț de părinți. Multă vreme am specificat pur și simplu numele rădăcinii (în acest caz - .main), dar acest lucru nu este foarte convenabil. Am început să caut documentația Sass și am găsit o soluție. De fapt, totul este simplu - trebuie să declarăm un link către părinte și să îl folosim acolo unde este necesar.

Asa am facut inainte:

Main &-title font-size: 30px color: #444 .main__icon // specificați root.main, în caz contrar, dacă utilizați & se va conecta la .main-title color: #444 width: 20px &-subtitle font-size : 20px & -description font-size: 14px margin-bottom: 30px

Și acum poți face asta:

Principal $self: & // link către părintele &-title font-size: 30px culoare: #444 #($self)__icon // în loc de & utilizați un link către culoarea părinte: #444 width: 20px &-subtitle dimensiunea fontului: 20px și descriere dimensiunea fontului: 14px margin-bottom: 30px

Dacă ați observat, am declarat o referință la părinte - $self: & . Acest lucru îmi amintește puțin de o referință la obiectul (acest lucru) care a declanșat evenimentul în JavaScript. Acum, în locul potrivit, îl putem numi pur și simplu #($self) . Se dovedește cât de simplu este totul, dar mă scarpinam în cap și mă gândeam că nu există nicio soluție la această problemă în Sass.

Titlu principal ( dimensiunea fontului: 30px; culoare: #444; ) .titul principal .pictograma__principal (culoare: #444; lățime: 20px; ) .subtitrarea principală (dimensiunea fontului: 20px; ) .descrierea principală ( dimensiunea fontului: 14px; marginea inferioară: 30px)

Șabloane

Se întâmplă adesea ca mai multe elemente să aibă aceeași bază de stil, dar să difere între ele doar prin câteva reguli. Să luăm butoanele de exemplu. Dacă luăm butoane de aceeași dimensiune, atunci aceștia pot diferi unul de celălalt doar prin culoare: roșu, verde, gri etc. Dacă utilizați Css pur, va trebui să specificați toate culorile butoanelor în stilurile de bază, separate prin virgule, sau să creați o clasă de bază. Dar în Sass este mult mai ușor:

%buton-culoare fundal: #666 chenar: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px înălțime: 40px .button-green @extend %button background-color: verde chenar-culoare: verde . buton-roșu @extend %button culoare de fundal: roșu culoare-chenar: roșu

Buton-verde, .button-rosu (culoare de fundal: #666; chenar: 1px solid #666; umplutură: 0 20px; dimensiunea fontului: 15px; înălțimea liniei: 40px; înălțimea: 40px; ) .button-verde ( culoarea de fundal: verde; culoarea chenarului: verde;

Șablonul în acest caz este selectorul de buton % (acest lucru este indicat de semnul - %). Acest lucru este convenabil deoarece selectorul de șablon în sine nu este implicat nicăieri, iar stilurile sale sunt moștenite de alți selectori prin directiva - @extinde. Acest șablon poate fi folosit de câte ori doriți, reducând astfel cantitatea de cod.

SassScript

În Sass, ca și în limbajele de programare, există caracteristici precum: crearea de variabile, operații aritmetice (adunare, scădere, împărțire, înmulțire etc.), iterații (bucle), funcții (mixine) și multe altele. Adică, Sass este un fel de limbaj de programare, care este din nou conceput pentru a simplifica scrierea codului și pentru a accelera semnificativ munca.

Variabile

O variabilă în Sass începe cu un semn $ , iar numele este scris în latină, de exemplu: $culoare . Trebuie remarcat faptul că semnele: „ — " Și " _ » sunt interschimbabile. De exemplu, dacă ați apelat $color-red , atunci puteți apela $color_red . Variabila este definită după cum urmează: $nume: valoare, de exemplu: $culoare: #f6f6f6 .

O variabilă declarată în afara oricăror niveluri de imbricare este disponibilă la nivel global, de exemplu. poate fi folosit peste tot. Dacă definiți o variabilă la orice nivel de imbricare al selectorului, atunci aceasta va fi disponibilă numai la acest nivel. Pentru ca acesta să funcționeze la nivel global, trebuie să specificați cuvânt cheie !global.

Titlu $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

În general, variabilele sunt un lucru minunat, trebuie doar să le declarați și să introduceți o valoare, iar apoi le puteți folosi cât doriți, oriunde. De exemplu, putem defini culorile dându-le nume specifice, dimensiunea fontului, familia de fonturi etc. și orice semnificații în general.

Directive

@extinde

Am atins această directivă mai sus când am studiat șablonul gol. Să ne consolidăm din nou cunoștințele. Prin utilizarea @extinde putem copia regulile oricărui selector. De exemplu, în timpul aspectului este posibil ca elementul „ A"și elementul" B„Poate fi asemănător ca aspect. În acest caz, puteți scrie reguli pentru elementul „A”, iar pentru „B” puteți copia pur și simplu stilurile elementului „A”, redefinind ușor proprietățile necesare.

Block_a culoare de fundal: #cccccc chenar: 5px solid #999999 padding: 20px font-size: 30px înălțime: 150px lățime: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b (culoare fundal: #cccccc; chenar: 5px solid #999999; umplutură: 20px; dimensiunea fontului: 30px; înălțime: 150px; lățime: 150px; ) .block_b (padding: 15px; )

ÎN în acest exemplu am facut 2 patrate identice. Pentru pătratul „B” am redefinit doar umplutura: 15px. Așa funcționează @extend. Folosesc această directivă destul de des.

@import

Această directivă vă permite să combinați mai multe fișiere de stil într-unul singur. Acest lucru este foarte convenabil, mai ales dacă proiectul este mare. A nu se confunda cu directiva care există în Css - @import. În Css, atributul necesar este − url().

De fapt, este mai convenabil să scrieți stiluri fișiere diferiteși fiecare are propriul său scop. De exemplu, întregul cadru al paginii poate fi împărțit în regiuni: header.sass, sidebar.sass, footer.sass. Puteți colecta totul din fișierul principal main.sass folosind @import. Fișierele de regiune pot fi specificate și folosind un caracter de subliniere la începutul numelui fișierului, de exemplu: _header.sass, _sidebar.sass, _footer.sass. Astfel de fișiere se numesc fragmente. Când importați fragmente, nu este necesar să specificați extensia fișierului.

Import simplu

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Importul fragmentelor

@import „antet” @import „bară laterală” @import „subsol”

Fișierele fragmente pot avea următoarele extensii: *.imbrutis, *.scss sau *.css. De exemplu, fisierul principal poate cu extensie *.imbrutis, și antetul site-ului, de exemplu, cu extensia *.scss. Adică, nu contează ce extensie are fișierul principal. Trebuie remarcat faptul că la import, toate variabilele și mixurile (vom vorbi despre ele mai jos) sunt transferate în fișierul principal în care are loc importul.

De asemenea, puteți specifica importarea mai multor fișiere separate prin virgule: @import „header”, „sidebar”, „footer”.

Rețineți că importul are loc în locul în care ați specificat directiva @import. Acest lucru se face de obicei la începutul documentului.

@la-rădăcină

Directivă @la-rădăcină vorbește de la sine și dacă este tradus în rusă, va suna așa - „de la rădăcină”. Cu alte cuvinte, mutăm selectorul la rădăcină, anulând lanțul de selectori părinte. Aici, desigur, puteți pune întrebarea: „De ce este necesară această directivă dacă puteți muta manual selectorul la rădăcină?” Răspunsul este simplu - comoditatea de a scrie cod fără a rupe structura. Când înveți să lucrezi cu Sass în complet vei intelege asta.

Dimensiunea fontului principal &-titlu: 30px culoare: #444 @at-root .main__icon color: #444 lățime: 20px

Titlu principal (dimensiunea fontului: 30px; culoare: #444; ) .main__icon (culoare: #444; lățime: 20px; )

Directive și expresii de control

directiva @if

Această directivă execută stiluri dacă expresia inclusă în ea returnează orice valoare, cu excepția falsȘi nul.

$culoare: verde .header @if $culoare == culoare de fundal verde: verde @else if $culoare == culoare de fundal albastru: albastru @else culoare de fundal: #f6f6f6

Antet (culoare de fundal: verde; )

Cei care sunt familiarizați cu cel puțin elementele de bază ale unui limbaj de programare (de exemplu, javaScript sau Php) nu le va fi greu de înțeles. Esența aici este aceeași, principalul lucru este să cunoașteți sintaxa de scriere a codului.

@pentru directivă

Într-un limbaj de programare (din nou în Javascript sau Php) folosind Pentru poți seta un ciclu. În Sass, această directivă face același lucru - creează o buclă. Pentru fiecare iterație (repetiție), este utilizată o variabilă contor care modifică datele de ieșire.

Directiva are 2 forme de scriere: 1. @for $var from<начало>prin<конец>și 2. @pentru $var de la<начало>la<конец>. Dacă doriți ca ultima cifră să fie inclusă în buclă, atunci utilizați „ prin". Să ne uităm la un exemplu:

@for $i de la 1 la 6 .elem-item-#($i) background-image: url("images/image-#($i).jpg")

Element-elem-1 ( imagine de fundal: url("imagini/imagine-1.jpg"); ) .elem-item-2 ( imagine de fundal: url("imagini/imagine-2.jpg"); ) . elem-item-3 ( imagine de fundal: url("imagini/imagine-3.jpg"); ) .elem-item-4 ( imagine de fundal: url("imagini/imagine-4.jpg"); ) . elem-item-5 ( imagine de fundal: url("imagini/imagine-5.jpg"); )

Pentru a specifica valoarea finală am folosit cuvântul cheie " la". În această situație, ciclul se termină la numărul - 5 . Observați cât de compact arată codul Sass.

@fiecare directivă

Directivă @fiecare la fel ca @for, afișează valorile într-o buclă și este convenabil deoarece, pe lângă numere, puteți itera peste anumite valori. Să luăm bucla de mai sus și să o schimbăm cu niște valori.

@each $bgItem în animal, lac, mare, peisaj, natură .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")

Elem-item-animal ( imagine de fundal: url("imagini/imagine-animal.jpg"); ) .elem-item-lake ( imagine de fundal: url("imagini/imagine-lac.jpg"); ) . elem-item-sea ( imagine de fundal: url("imagine/image-sea.jpg"); ) .elem-item-landscape ( imagine de fundal: url("imagini/image-landscape.jpg"); ) . elem-item-nature ( imagine de fundal: url("imagini/imagine-nature.jpg"); )

În acest caz, o variabilă contor nu este creată, iar numărul de iterații depinde de numărul de valori create după cuvântul cheie " în". Valorile sunt transmise printr-o variabilă (în acest exemplu - $bgItem), al cărei nume poate fi arbitrar.

Mixine (funcții)

Mixin-urile (mixin-urile) sunt un fel de funcție, ca într-un limbaj de programare, care este conceput pentru a scăpa de codul repetitiv. Mixin-urile pot conține fragmente întregi de stil, care sunt permise în Sass. Să ne uităm la un exemplu pentru o mai mare claritate.

@mixin align-center poziție: absolut sus: 50% stânga: 50% transform: translate(-50%, -50%) .container @include align-center

Un mixin este creat cu directiva @mixin, urmat de un spațiu separat de numele mixin-ului, precum și de parametrii trecuți opțional. Permiteți-mi să notez imediat că cratima (-) și semnele de subliniere (_) din numele mixului sunt interschimbabile. Un mixin poate conține nu numai reguli, ci și selectori. Mai sus am dat un exemplu de mixin elementar fără parametri.

Mixin-ul este apelat cu directiva @include și apoi, separat de un spațiu, indicăm numele mixin-ului creat. În exemplul de mai sus, aceasta este centrarea blocului de-a lungul axei X și a axei Y folosind poziționarea absolută. Dacă trebuie să utilizați acest lucru des, atunci veți fi de acord că este mai ușor să apelați un mixin decât să scrieți stiluri de centrare din nou și din nou.

Acum să ne uităm la un mixin cu parametri (argumente).

@mixin chenar($width, $color) chenar: width: $width stil: culoare solidă: $culoare .square @include chenar(2px, #ccc)

Pătrat (lățime chenar: 2px; stil chenar: solid; culoare chenar: #ccc; )

După cum puteți vedea, după numele mixin-ului din paranteză precizăm argumentele, în acest caz lățimea și culoarea chenarului. Acesta este cel mai simplu mix pe care l-am oferit pentru claritate. În practică, puteți găsi mixine mai complexe folosind diverse conditiiși variabile. Dar să nu complicăm totul acum, ar trebui să începem întotdeauna cu ceva mic și simplu și apoi să trecem în sus pe măsură ce ne îndreptăm.

Aceasta se încheie scurta mea recenzie a preprocesorului Sass. De ce mic? Da, pentru că asta nu este tot ce ți-am spus. În general, folosind cele de mai sus, puteți începe în siguranță să utilizați Sass în loc de Css acum. Puteți afla mai multe despre Sass, referindu-vă la documentația pe care am furnizat-o mai sus.

Ei bine, vă mulțumesc tuturor pentru atenție! Ca întotdeauna, pune întrebări în comentarii și abonează-te fie la canalul telegram, fie la newsletter-ul de e-mail (formular din bara laterală din dreapta) pentru a nu pierde nimic interesant.

Ne vedem în celelalte postări ale mele...

Traducerea articolului: Ghidul absolut pentru începători pentru Sass.
Andrew Chalkley.

Ce este SASS?

SASS este o abreviere pentru Foi de stil extraordinare din punct de vedere sintactic este un metalimbaj bazat pe CSS, al cărui nume poate fi tradus ca „CSS cu o sintaxă excelentă”, proiectat de Hampton Catlin.

Este un mijloc de simplificare a procesului de creare a stilurilor CSS, făcând mult mai ușoară dezvoltarea și menținerea ulterior a codului.

De exemplu, ați trebuit vreodată să parcurgeți întregul conținut al unui fișier de stil pentru a găsi o anumită valoare de culoare HEX pentru a o înlocui cu alta? Sau apelați la o aplicație de calculator care nu este întotdeauna la îndemână pentru a calcula lățimea coloanei pentru un șablon cu mai multe coloane?

SASS are la dispoziție instrumente pentru a vă scuti de această rutină. Acestea includ variabile, peștele migurină, cuibăritȘi moștenirea selectorului.

Practic, codul SASS este similar cu CSS, dar de bază trăsătură distinctivă Cea care se remarcă imediat este absența punctului și virgulă după fiecare pereche proprietate-valoare și absența acoladelor.

Să luăm ca exemplu următoarea bucată de cod CSS:

#zgârie_nori anunț
{
afisare: bloc;
lățime: 120px;
inaltime: 600px;
}

#leaderboard_ad
{
afisare: bloc;
lățime: 728px;
inaltime: 90px;
}

Care este echivalent cu acest SASS:

#zgârie_nori anunț
afisare: bloc
lățime: 120px
înălțime: 600px

#leaderboard_ad
afisare: bloc
lățime: 728px
înălțime: 90px

SASS folosește o spațiere (indentație la începutul liniei următoare) de două spații pentru a indica imbricarea fragmentelor de cod. ( *În ultimul fragment, pentru claritate, am evidențiat aceste spații cu un fundal roșu.)

Acum că avem o idee despre cum este creat codul SASS, să ne uităm la problemele care îl fac așa excelent.

Variabile.

În SASS, pentru a declara o variabilă trebuie să precedați numele acesteia cu simbolul dolarului $. Și dacă numele variabilei dvs. este, să zicem, roșu , atunci după două puncte putem indica următoarea valoare corespunzătoare acesteia:

SASS are funcții încorporate, cum ar fi întunecare și lumina, care pot fi utilizate pentru a modifica valorile acestor tipuri de variabile.

Deci, în exemplul următor, culoarea fontului din paragrafe va fi, de asemenea, roșie, dar mai închisă decât cea folosită în titlurile h1:

$red: #FF4848
$dimensiune font: 12px
h1
culoare: $red

p
culoare: întuneca ($roșu, 10%)

Puteți efectua operații aritmetice cu variabile, cum ar fi adunarea și scăderea, atâta timp cât valorile utilizate sunt de același tip de date. Dacă, de exemplu, dorim să aplicăm o nuanță mai închisă, atunci tot ce trebuie să facem este să scădem din valoarea culorii deja folosită în cod, stocată într-o variabilă, o mică valoare HEX hexazecimală egală cu, de exemplu, #101 . Același lucru se aplică și în cazul în care este necesar să se schimbe valoarea mărimii fontului, să zicem, să o mărim cu 10 pixeli, pentru aceasta adăugăm pur și simplu pixelii lipsă:

p.adunare_și_scădere
culoare: $red - #101
dimensiunea fontului: $fontsize + 10px

Cuibărire.

Există două tipuri de cuibărit în SASS.

Imbricarea selectoarelor.

Acesta este primul tip de imbricare, care este similar cu cel folosit pentru structura codului HTML:

$dimensiune font: 12px

Difuzor
.Nume
font:
greutate: bold
dimensiune: $fontsize + 10px
.poziţie
font:
dimensiune: $fontsize

Dacă te uiți la codul CSS rezultat, orice comentarii nu vor fi necesare. Prin imbricarea clasei .name în clasa .speaker ( *în același mod - folosind două spații la începutul rândului următor) este creat selectorul CSS .speaker.name. Același lucru este valabil și pentru următorul nume de clasă .position , situat după declarația de proprietate pentru primul selector, care are ca rezultat imbricarea celui de-al doilea selector .speaker.position :

Vorbitor.nume(
greutate font: bold;
dimensiunea fontului: 22px; )
.poziție.difuzor (
dimensiunea fontului: 12px; )

Imbricarea proprietăților.

Al doilea tip de imbricare vă permite să structurați proprietățile cu un prefix (* font-family , font-size , font-weight sau border-style , border-color , border-radius etc.):

$dimensiune font: 12px

Difuzor
.Nume
font:
greutate: bold
dimensiune: $fontsize + 10px
.poziţie
font:
dimensiune: $fontsize

În exemplul de mai sus, folosim declarația fontului părinte, proprietate universală: și apoi pe o nouă linie după o indentație cu două spații indicăm a doua parte a proprietății, care este de obicei situată după cratimă.

Adică, dacă specificăm font: property, pe linia următoare după două spații greutatea: proprietate, atunci ca rezultat aceasta va fi echivalentă cu binecunoscuta proprietate font-weight.

Vorbitor.nume(
greutate font: bold;
dimensiunea fontului: 22px; )
.poziție.difuzor (
dimensiunea fontului: 12px; )

Modulul oferă suport pentru toate proprietățile care conțin cratime.

Acest tip de imbricare este o modalitate excelentă de a vă organiza și structura codul CSS și de a evita repetarea nedorită. ( *USCAT- „Nu te repeta” - „Nu te repeta.” Situații în care atunci când formatează CSS anumite elemente, stilurile acestora sunt repetate și/sau suprascrise în alte locuri, ceea ce complică lizibilitatea și întreținerea codului).

Hagfish.

O altă caracteristică excelentă a SASS este peștele migurină.

Mixins vă permit să reutilizați bucăți întregi de cod SASS și chiar să le transmiteți argumente dacă este necesar. Și, important, puteți specifica și valorile lor originale.

Pentru a defini un mixin, utilizați cuvântul cheie SASS special rezervat @mixin urmat de numele mixin-ului la alegere. Dacă este nevoie de argumente, enumerați-le parantezele. Valorile implicite pentru argument sunt specificate la definirea mixin-ului, separate prin două puncte. ( *Cu alte cuvinte, mixin-urile sunt funcții CSS.)

Procedura de utilizare a mixin-urilor este foarte simplă - după cuvântul cheie @include, specificați numele mixin-ului dorit și enumerați parametrii necesari, dacă există, între paranteze.

Aruncă o privire la următorul exemplu:

@mixin border-radius($amount: 5px) /* definește mixin-ul */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount

h1 /* folosește mixin */
@include border-radius(2px)

Difuzor
@include bordura-rază

Acest SASS, după compilare, va fi convertit în codul CSS de mai jos:

h1 (
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
chenar-rază: 2x; )

Difuzor (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
chenar-rază: 5px; )

Pentru antetul h1 am specificat în mod explicit valoarea razei colțului chenarului, dar pentru elementul cu numele clasei .speaker nu am făcut acest lucru, așa că a fost luată valoarea implicită de 5px.

Moștenirea selectorului.

O alta excelent O caracteristică a sintaxei SASS este capacitatea selectorilor de a moșteni toate stilurile definite pentru alți selectori. Pentru a profita de această caracteristică, trebuie să utilizați cuvântul cheie @extend, urmat de un selector ale cărui proprietăți doriți să le moșteniți:

h1
chenar: 4px solid #ff9aa9

Difuzor
@ extinde h1
lățime chenar: 2px

Ce va fi compilat pentru:

h1,.difuzor (
chenar: 4px solid #ff9aa9; )

Difuzor (
lățime chenar: 2px; )

(*Rețineți că declarația de frontieră: 4px solid #ff9aa9; nu se repetă într-o regulă cu selectorul .speaker, ci în schimb un al doilea selector este adăugat la prima regulă. Cu alte cuvinte, nu există duplicare a codului.)

Încercați SASS în acțiune.

Pe net.

Puteți experimenta SASS online fără a instala mai întâi modulul pe computerul local.

Dar înainte de a începe să experimentați, în partea de jos a paginii, selectați opțiunea „Sintaxă indentată”.

Instalat pe PC.

SASS în sine este o aplicație (bijuterie) a platformei Ruby. Prin urmare, pentru a-l instala, nu puteți face fără a instala mai întâi platforma în sine și managerul de pachete al acestui limbaj de programare RubyGems. După instalarea cu succes a platformei în sine și a managerului, rulați următoarea comandă în consolă:

gem install sass

Modulul SASS poate fi folosit ca instrument pentru a converti fișierele SASS în fișiere în format CSS în modul linie de comandă.

Acest lucru se poate face, de exemplu, introducând următoarea comandă:

sass --watch sass_folder:stylesheets_folder

Unde sass_folder este calea către folderul care conține fișiere SASS (adică cu extensia .sass), iar stylesheets_folder este calea către folderul în care fișierele CSS rezultate vor fi salvate după compilare. Comanda --watch îi spune modulului că ar trebui să urmărească orice modificări în folderul specificat și, dacă există, după salvarea lor, să convertească fișierele .sass originale în fișiere .css echivalente.

Conversia inversă a CSS în SASS.

Puteți începe să utilizați SASS prin conversia stilurilor utilizate în proiectele dvs. existente în acest format folosind utilitarul „sass-convert”.

Pentru a face acest lucru, în linia de comandă, introduceți calea către folderul al cărui conținut trebuie convertit ( *adică mergi doar în directorul dorit în care se află fișiere sursă ). Apoi rulați utilitarul menționat mai sus și furnizați-i următorii parametri:

sass-convert --din css --în sass –R.

Unde indicatorul -R specifică modalitatea recursivă de a efectua operația. Și următorul punct după el. înseamnă că fișierele .sass rezultate vor fi salvate în directorul curent. ( *Dacă este necesar, în loc de un punct, puteți specifica calea către folderul în care doriți să salvați fișierele rezultate.)

27.07.2017

Această serie de tutoriale SASS este destinată începătorilor și dezvoltatorilor experimentați. Acesta este primul dintr-un tutorial din patru părți care vă va ghida prin preprocesor, îl va instala și va afla despre unele dintre caracteristicile acestuia.

Ce este SASS?

SASS (Foi de stil din punct de vedere sintactic)- una dintre cele mai populare. Este un set de funcții CSS care vă permit să codificați mai rapid și mai eficient. SASS acceptă integrarea cu Firefox Firebug. SassScript vă permite să creați variabile, stiluri imbricate și selectoare moștenite.

SASS face rapid și ușor să scrieți mai puțin (uneori semnificativ mai puțin) cod CSS și să îl gestionați dinamic ca un limbaj de programare (apropo, nu este un limbaj de programare). Este un instrument excelent pentru a scrie CSS mai funcțional și mai curat, care poate accelera fluxul de lucru al oricărui designer și dezvoltator.

De ce ai nevoie de SASS?

Majoritatea cadrelor front-end, inclusiv Bootstrap, Materialize și Foundation, sunt construite cu acest preprocesor excelent. Cunoașterea SASS vă va ajuta să utilizați mai multe trăsături aceste cadre.

Cum se folosește SASS?

Există multe aplicații care fac ușor și rapid începerea utilizării SASS: CodeKit, Compass, Koala etc. Veți afla despre ele în alte părți ale tutorialului. În acest capitol, nu vom folosi alte aplicații sau instrumente decât cele necesare pentru a rula SASS pe un computer. Nu trebuie să vă faceți griji sistem de operare, pentru că totul va fi clar pentru toți utilizatorii.

Descărcați și instalați SASS

Puteți instala SASS doar pe o mașină care are deja instalat Ruby:

• Ruby vine preinstalat pe Mac, astfel încât să puteți instala Sass Macintosh imediat;
• Dacă sunteți pe Windows, mai întâi va trebui să descărcați Ruby;
• Ruby pe Linux poate fi descărcat prin managerul de pachete apt, rbenv sau rvm.

Odată ce Ruby este instalat, puteți instala SASS pe computer. Să deschidem o linie de comandă Ruby și să instalăm SASS pe sistemul tău:

Gem install sass

Dacă comanda de mai sus nu funcționează, atunci poate fi necesar să utilizați comanda sudo:

Sudo gem instalează sass

Dacă doriți să verificați versiunea SASS, utilizați următoarea comandă:

SASS este instalat. Să creăm un folder de proiect și să-l numim sass-basic. Creați un element de bază fișier html cu urmatorul cod:

Primul meu proiect SASS

Bună prietene, învăț SASS și este cu adevărat minunat.

Body( text-align: center; ) h1( culoare: #333; ) p( culoare: #666; )

Acum trebuie să compilați acest fișier folosind linia de comandă/terminalul. Să deschidem un prompt de comandă în același director (poate fi necesar să utilizați un prompt de comandă Ruby dacă aveți obișnuit Linie de comanda nu funcționează). Tastați următoarele și apăsați Enter:

Sass --watch style.scss:style.css

Veți observa că au fost generate fișiere noi: style.css și style.css.map. Este de remarcat faptul că nu trebuie să atingeți fișierul hartă, la fel ca fișierul .css. Dacă doriți să faceți modificări, puteți face acest lucru prin style.scss. Nu trebuie să repetați acest proces de fiecare dată când schimbați stilul. Compilarea SASS va funcționa automat atunci când faceți modificări în fișierul .scss.

În următorul capitol, ne vom uita la variabilele SASS și de ce sunt cea mai utilă caracteristică din SASS (și orice alt preprocesor CSS).