Preprocesor Sass. Un ghid complet și de ce aveți nevoie de el. Bazele Sass
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ții 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 vrei să-l folosești. 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. Acest lucru face ca variabilele să devină o caracteristică puternică, de exemplu atunci când lucrați cu culorile mărcii utilizate pe întregul site.
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 vă va permite să imbricați selectoare CSS î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ă exemplu tipic Stiluri de navigare pe site:
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ățile CSS din .message și să le aplicați la .success, .error și .warning. Există o magie care funcționează în timpul compilării fișierului CSS 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 procedăm simplu calcule matematice pentru a calcula lățimea deoparte și articol.
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 favorite editor de textși creați un fișier nou, salvați-l în folderul sass și numiț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 o resetare de bază pentru HTML, un import pentru Compass și vom scrie 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 de la intrare, precum și pentru a o reutiliza în foaia de stil.
Atribuirea stilurilor unui buton
.button ( lățime: 158px; înălțime: 30px; margine: 120px automat; dimensiunea fontului: 16px; greutatea fontului: bold; text-align: center; afișaj: bloc; culoare: #fff; umplutură: 7px 0 0; chenar : 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; poziție: relativă; )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; text-shadow: 0 -1px 0 $text-shadow; poziție: relativă; //Clasele busolă @include background($button-colour linear-gradient(sus, $button-start 20%, $button- stop)); @include chenar-raza (3px); @include box-shadow (inserție 0 1px 0 rgba (#fff, 0.8)); @include tranziția (toate ușurința de 0.3s); )
După ce stilurile inițiale sunt definite, putem include mai multe clase abstracte pentru culorile de fundal, gradienții liniari, razele marginilor ș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; fundal: #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); fundal: #2e6bc6 -moz-linear-gradient(sus, # 37a0dc 20%, #2068a6); fundal: #2e6bc6 -o-linear-gradient(sus, #37a0dc 20%, #2068a6); fundal: #2e6bc6 linear-gradient (sus, #37a0dc 20%, #2068a6); webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0,8); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); , 0,8); -webkit-transition: toate 0,3s ease; -moz-transition: toate 0,3s ease; -o-transition: toate 0,3s ease; 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 principale ale butoanelor, 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ă la element 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); fundal: #2e7dc6 -o-linear -gradient(sus, #3f9ff0 20%, #2874a9); fundal: #2e7dc6 liniar-gradient(sus, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); .button: activ ( fundal: -webkit-gradient(liniar, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); fundal: -webkit-linear - gradient(jos, #37a0dc 20%, #2068a6); fundal: -moz-linear-gradient(jos, #37a0dc 20%, #2068a6); fundal: -o-linear-gradient(jos, #37a0dc 20%, # 2068a6); fundal: gradient liniar (jos, #37a0dc 20%, #2068a6); umbră text: 0 1px 0px #06304b; -webkit-box-shadow: inserție 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.
fișier 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.
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- metalimbaj în 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.
În principiu, codul SASS este similar cu CSS, dar principala caracteristică distinctivă care vă atrage imediat atenția 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;
latime: 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 părintelui, fontul proprietății generice: și mai departe linie nouă după o indentare în două spații indicăm a doua parte a proprietății, care se află de obicei după cratimă.
Adică dacă specificăm fontul: property, on rândul următor după două spații, proprietatea weight:, atunci rezultatul va fi echivalent cu proprietatea familiară 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 inutilă. ( *USCAT- „Nu te repeta” - „Nu te repeta.” Situații când Formatare CSS anumite elemente stilurile lor sunt repetate și/sau redefinite în altă parte, făcând codul dificil de citit și de întreținut).
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, folosiți ceva special rezervat în SASS cuvânt cheie@mixin , urmat de numele mixin-ului pe care l-ați ales. Dacă este nevoie de argumente, enumerați-le între paranteze. 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 margine: 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 conversia fișierelor SASS în fișiere în format CSS în modul Linie de comanda.
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 originale .sass î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ă mergeți la directorul dorit în care se află fișierele 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.)
Astăzi, dezvoltatorii au o listă uriașă de instrumente de asistență. Unul dintre ei este Sass. În această postare, voi descrie în detaliu ce este, pentru ce este folosit și cum puteți începe să îl utilizați.
Dacă sunteți deja familiarizat cu Sass/Scss, l-ați instalat și sunteți gata să îl utilizați, atunci puteți citi această intrare - „”. În el descriu toate complexitățile preprocesorului, precum și cum să-l folosești corect.
Ce este Sass?
Sass este un tip de preprocesor care vă va ajuta în timpul dezvoltării front-end. Cert este că fișierele CSS devin din ce în ce mai mari și, după un timp, devin mai dificil de lucrat.
Sass a fost creat pentru a rezolva această problemă. Folosește o sintaxă simplă (care este aproape exact aceeași cu CSS obișnuit), dar adaugă totuși o mulțime de caracteristici diferite.
De exemplu, pentru a nu specifica aceeași proprietate de mai multe ori, puteți crea un element și apoi conectați acest element la alte clase, precum și multe altele. Aceasta este doar o mică parte din ceea ce se poate face.
Cum se instalează Sass?
Pentru a începe să utilizați Sass, trebuie să descărcați și să instalați Ruby de pe site-ul oficial, introduceți o comandă în consolă (pentru a instala Sass) și ați terminat. Mai jos, întregul proces este descris pas cu pas.
- Instalarea Ruby. Accesați site-ul oficial în secțiunea de descărcare, selectați versiunea Windows (versiunea) și descărcați. De exemplu, folosesc Windows 7 (64 de biți), așa că voi descărca Ruby 2.2.4 (x64).
- Urmați toate instrucțiunile de la instalator.
- După instalarea cu succes a Ruby, deschideți Consola Windowsși scrieți gem install sass și după aceea va începe procesul Instalații Sass. Dacă în timpul instalării primești o eroare, atunci încearcă să schimbi gem în sudo și la final ar trebui să primești următoarea linie: sudo gem install sass .
Testare
După ce ați instalat Sass, trebuie să vă asigurați că faceți totul corect. Acest lucru se poate face în doi pași simpli.
- Deschideți linia de comandă Windows
- Scrie sass -v acolo. Dacă ați instalat totul corect, ar trebui să vedeți ceva ca această linie Sass 3.4.19 (Steve selectiv) .
PS. Dacă nu vedeți nimic, este posibil să nu vă aflați în directorul corect. Mai întâi, trebuie să scrieți cd și apoi calea către locul în care ați instalat Ruby. În cazul meu ar fi ca acest cd D:\Programs\Ruby22\bin\ . Odată ce ajungeți la această directivă, trebuie să scrieți sass -v . Dacă tot nu vedeți nimic, repetați procesul de instalare de la bun început și apoi reveniți aici din nou.
Folosind Sass la serviciu
Mai întâi, să creăm un fișier simplu numit style.scss și în interior vom scrie următoarele:
Main-wrapper ( lățime: 1024 px; margine: 0 automat; .sidebar ( float: stânga; lățime: 30%; ) . container ( lățime: 67%; float: dreapta; ) )
Vă rugăm să rețineți că formatul fișierului este .scss, nu .css. .scss folosește o sintaxă puțin diferită, dar este de bază și destul de ușor de înțeles de la început (dacă ați mai folosit css). Și dacă citiți acest articol, mă aștept să fiți deja familiarizați cu el.
Și așa continuăm cu style.css:
După cum puteți vedea, Sass a preluat tot conținutul fișierului style.scss și l-a transformat într-un fișier CSS obișnuit.
De asemenea, rețineți că în scss, toate stilurile sunt scrise într-o formă de arbore (adică o clasă în cadrul unei clase).
De exemplu aceasta:
Main-wrapper ( afișare: bloc; .sidebar ( float: stânga; lățime: 30%; .block ( afișare: niciunul; ) ) )
A se transforma în:
Main-wrapper ( afișare: bloc; ) .main-wrapper .sidebar (float: stânga; lățime: 30%;) .main-wrapper .sidebar .bloc (afișare: niciunul; )
Desigur, SCSS este mult mai convenabil.
Iată câteva dintre avantajele SCSS:
- Stiluri de grupare
- Abilitatea de a găsi rapid clasa/id-ul necesar
- Folosind aceleași stiluri în mai multe locuri
Te-ai putea întreba, ce este --watch? Această comandăîl obligă pe Sass să țină evidența fiecărei modificări aduse style.scss. Adică, de fiecare dată când salvați o nouă copie a acestui fișier, Sass va lua notă de acest lucru și va compila o nouă versiune a CSS.
PS. Dacă aveți deja o versiune compilată de CSS în același folder ca style.scss, o va suprascrie cu una mai nouă.
Puncte importante
În această secțiune, vreau să dau câteva sfaturi care vă pot fi utile.
Pentru a crea un fișier CSS, mai întâi trebuie să creați un fișier SCSS în care specificați stilurile pentru compilarea CSS.
Dacă primiți o eroare în timpul compilării, cel mai probabil ați greșit sintaxa Sass. Verificați fișierul cu atenție și încercați să compilați din nou.
Înainte de a putea utiliza Sass, trebuie să-l configurați în proiect. Dacă doriți doar să citiți, atunci nu ezitați să citiți, dar vă recomandăm să instalați mai întâi Sass. Instalați Sass pentru a înțelege toate caracteristicile 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ă procesează fișierul Sass și îl salvează ca un simplu fișier CSS pe care îl puteți utiliza pe orice site.
Cel mai simplu mod de a obține acest rezultat este utilizarea terminalului. Odată ce Sass este instalat, vă puteți compila Sass în CSS folosind comanda sass. Trebuie doar să-i spuneți lui Sass de unde să obțineți fișierul Sass și în ce fișier CSS să îl compilați. De exemplu, rulând comanda sass input.scss output.css în terminal, îi spuneți lui Sass să ia un fișier Sass, input.scss , și să îl compilați în output.css .
Variabile
Gândiți-vă la variabile ca pe o modalitate de a stoca informații 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 alte valori CSS pe care doriți să le utilizați în variabile. Pentru a crea o variabilă în Sass, trebuie să utilizați simbolul $. Să ne uităm la un exemplu:
Sintaxa SCSS
$font-stack : Helvetica , sans-serif ; $culoare-primara : #333 ; body ( font : 100% $font-stack ; culoare : $primary-color ; )Sintaxa Sass
$font-stack : Helvetica , sans-serif $primary-color : #333 font body : 100% $font-stack color : $primary-colorCâ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. Acest lucru face ca variabilele să devină o caracteristică puternică, de exemplu atunci când lucrați cu culorile mărcii utilizate pe întregul site.
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 vă va permite să imbricați selectoare CSS î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:
Sintaxa SCSS
nav ( ul ( margine : 0 ; padding : 0 ; list-style : none ; ) li ( display : inline-block ; ) a ( display : block ; padding : 6px 12px ; text-decoration : niciunul ; ) )Sintaxa Sass
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: niciunulAț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 ( margine : 0 ; padding : 0 ; list-style : none ; ) nav li ( display : inline-block ; ) nav a ( display : block ; padding : 6px 12px ; text-decoration : none ; )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 .
Sintaxa SCSS
// _reset.scss html, body, ul, ol ( margin: 0; padding: 0; ) // base.scss @import "reset" ; corp (font: 100% Helvetica, sans-serif; culoare de fundal: #efefef;)Sintaxa Sass
// _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @import reset body font : 100% Helvetica , sans-serif background-color : #efefefRețineți că folosim @import „resetare”; î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 ( margin : 0 ; padding : 0 ; ) body ( font : 100% Helvetica , sans-serif ; background-color : #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ă:
Sintaxa SCSS
@mixin border-radius ($raza) ( -webkit-border-radius : $raza ; -moz-border-radius : $raza ; -ms-border-radius : $raza ; border-radius : $raza ; ) .box ( @include border-radius (10px); )Sintaxa Sass
=raza-chenar ($radius ) -webkit-border-radius : $radius -moz-border-radius : $raza -ms-border-radius : $raza chenar-raza : $raza .box +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:
.box ( -webkit-border-radius : 10px ; -moz-border-radius : 10px ; -ms-border-radius : 10px ; border-radius : 10px ; )Extensie/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 folosind alte funcții Sass care merg mână în mână cu clasele de șabloane ale extensiei.
O clasă șablon este un tip special de clasă care apare numai atunci când utilizați o extensie - aceasta vă va menține CSS-ul compilat curat și ordonat.
Sintaxa SCSS
%equal-heights ( display : flex ; flex-wrap : wrap ; ) %message-shared ( chenar : 1px solid #ccc ; padding : 10px ; culoare : #333 ; ) .message ( @extend %message-shared ; ) . succes ( @extend %message-shared ; border-color: green ; ) .error ( @extend %message-shared ; border-color: red ; ) .warning ( @extend %message-shared ; border-color : galben ; )Sintaxa Sass
// Această bucată de cod nu va ajunge în CSS deoarece %equal-heights nu a fost niciodată extins. afișare cu înălțimi egale : flex flex-wrap : înfășurare // Această bucată de cod va ajunge în CSS deoarece %message-shared este extins.% chenar partajat mesaj : 1 px solid #ccc padding : 10 px culoare : #333 .message @extend %message-shared .success @extend %message-shared border-color : verde .error @extend %message-shared border-color : roșu .warning @extend %message-shared border-color : galbenCodul de mai sus spune claselor .message , .success , .error și .warning să se comporte ca %message-shared . Aceasta înseamnă că oriunde este apelat %message-shared, vor fi apelați și .message , .success , .error și .warning. Magia se întâmplă în CSS-ul generat, unde fiecare dintre aceste clase primește proprietăți CSS, la fel ca %message-shared . Acest lucru vă va permite să evitați să scrieți multe clase în elemente HTML.
Puteți extinde majoritatea CSS simplu adăugarea de selectoare la clasele de șabloane în Sass, totuși, folosind șabloane - cel mai simplu mod asigurați-vă că nu extindeți clasa oriunde este folosită în stilurile dvs., ceea ce ar putea duce la seturi de stiluri neintenționate în CSS.
Când generați CSS, va arăta ca exemplul de mai jos. Vă rugăm să rețineți că %equal-heights nu apare în CSS deoarece nu a fost niciodată folosit.
.message, .success, .error, .warning (chenar: 1px solid #cccccc; padding: 10px; culoare: #333;).succes (border-color: green;).error (border-color: red;). avertisment ( culoarea chenarului : 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 .
Sintaxa SCSS
.container ( lățime : 100% ; ) articol [ rol = „principal” ] ( float : stânga ; lățime : 600px / 960px * 100% ; ) deoparte [ rol = „complementar” ] ( float : dreapta ; lățime : 300px / 960px * 100% ;)Sintaxa Sass
.lățime container : 100% articol [ rol = „principal” ] float : lățime stânga : 600px / 960px * 100% deoparte [ rol = „complementar” ] float : lățime dreapta : 300px / 960px * 100%Am creat o grilă modulară simplă, receptivă, cu o lățime de 960 de 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 [ rol = „principal” ] ( float : stânga ; lățime : 62,5% ; ) deoparte [ rol = „complementar” ] ( float : dreapta ; lățime : 31,25% ; )
Sass este o extensie CSS care adaugă putere și eleganță într-un limbaj simplu. Sass vă oferă posibilitatea de a utiliza variabile, reguli imbricate, mixuri, importuri inline și multe altele, toate cu o sintaxă complet compatibilă cu CSS. Sass ajută la menținerea unor foi de stil uriașe bine organizate și a stilurilor mici care rulează rapid, în special cu biblioteca de stiluri Compass.
Scopul acestui articol este să clarificați cum funcționează Sass în diferite cazuri și să decideți singur dacă aveți nevoie de el.
Sintaxă
Există două sintaxe disponibile pentru Sass. Primul, cunoscut sub numele de SCSS (Sassy CSS) și folosit în acest articol — este un avansat Sintaxa CSS. Aceasta înseamnă că fiecare foaie de stil CSS validă este un fișier SCSS valid, purtând aceeași logică. Mai mult, SCSS înțelege cele mai multe hack-uri CSS și sintaxele furnizorilor, cum ar fi sintaxa filtrului din vechiul IE. Această sintaxă este îmbunătățită de funcționalitatea Sass descrisă mai jos. Fișierele care utilizează această sintaxă au extensia .scss.
A doua sintaxă și mai veche, cunoscută și sub numele de sintaxă de margine sau uneori doar Sass, oferă o modalitate mai concisă de a lucra cu CSS. Folosește indentarea în loc de paranteze pentru a separa selectoarele de imbricare și liniile noi în loc de punct și virgulă pentru a separa proprietățile. Uneori, oamenilor le este mai ușor de înțeles și mai rapid de scris decât SCSS. De fapt, aceste sintaxe au aceeași funcționalitate, deși unele adoptă o abordare ușor diferită. Fișierele care utilizează această sintaxă au extensia .sass.
Oricare dintre sintaxele poate importa fișiere scrise în cealaltă. Fișierele pot fi convertite automat dintr-unul în altul folosind comanda sass-convert:
# Convertiți Sass în SCSS $ sass-convert style.sass style.scss # Convertiți SCSS în Sass $ sass-convert style.scss style.sass
Folosind Sass
Sass poate fi folosit în trei moduri: ca linie de comandă, ca modul Ruby independent și ca plugin pentru cadre de rack, inclusiv Ruby on Rails și Merb. În primul rând, pentru toate acestea, trebuie să instalați bijuteria Sass:
Dacă sunteți pe Windows, poate fi necesar să instalați mai întâi Ruby.
Pentru a rula Sass din linia de comandă, utilizați pur și simplu:
sass input.scss output.css
De asemenea, îi poți spune lui Sass să urmărească fișierul și să actualizeze CSS-ul de fiecare dată când se modifică fișierul Sass:
sass --watch input.scss:output.css
Dacă aveți un director cu o mulțime de fișiere Sass, atunci îi puteți spune și lui Sass să urmărească întregul director:
sass --watch app/sass:public/stylesheets
Utilizați sass --help pentru documentația completă.
Selectoare
CSS vs. selectoare SCSS.
#principal (culoare: #999; ) #principal .conținut (culoare: #bfbfbf; )Fragmentul CSS de mai sus ar putea fi scris în SCSS astfel:
#principal( culoare: #999; .conținut( culoare: #bfbfbf; ) )
După cum putem vedea, structura SCSS este mai asemănătoare cu structura DOM. Acest lucru ne permite să ne organizăm CSS-ul mai eficient. Iată exemple:
#principal h1 (culoare: #00ff00; lățime: 97%; .title (culoare fundal: #ff0000; culoare: #000000; ) )
Va fi compilat pentru:
#principal h1 (culoare: #00ff00; lățime: 97%; ) #principal h1 .title( culoare de fundal: #ff0000; culoare: #000000; )
Referindu-ne la selectorul de părinte:
#wrapper h1( lățime: 20px; &:hover( lățime: 25px; ) )
& va fi înlocuit de selectorul de părinte. Adică, codul de mai sus va fi echivalent cu:
#wrapper h1( lățime:20px; ) #wrapper h1:hover( lățime:25px; )
Importurile
Import normal.
@import „foo.css”; //importă ecranul foo.css @import „foo”; //importă ecranul foo.scss @import „foo.scss”; //importă foo.scss @import „foo1”,”foo2” ecran; //importă foo1.scss și foo2 scssParțial
Dacă nu doriți să compilați fișierul SCSS ca CSS, puteți utiliza „_” înaintea numelui fișierului.
@import „culori”; //_colors.scss va fi importat @import „utils/foo.scss”; // Aceasta importă fo.scss în folderul utils.
Importuri imbricate:
Dacă demo.scss include:
Exemplu (culoare: roșu; )
#main ( @import „demo”; )
Va fi compilat la
#principal .exemplu (culoare: roșu; )
Variabile
Variabilele SCSS încep cu un caracter $ .
$width: 10px; $headercolor:red; #principal h1( lățime: $lățime; culoare:$headercolor; )
Va fi compilat pentru:
#principal h1( lățime: 10px; culoare: roșu; )
Variabilele sunt disponibile numai în nivelul selectorului imbricat unde sunt declarate. Dacă doriți ca o variabilă să fie accesibilă în afara domeniului de aplicare, atunci trebuie să o adăugați !global
#principal ( $width: 5em !global; width: $width; ) #sidebar (width: $width; )
Puteți specifica variabile în dosar separatși puteți importa acest fișier scss pentru a utiliza aceste variabile. Acesta este ca un fișier de configurare pentru proiectul dvs. Dacă modificați valoarea variabilelor, aceasta va fi schimbată oriunde o utilizați. Acest lucru este foarte eficient pentru proiecte mari. Vom vedea asta puțin mai târziu.
De asemenea, puteți efectua diverse operații în SCSS. De exemplu:
P ( font: 10px/8px; // CSS pur fără diviziune $width: 1000px; latime: $latime/2; // Folosind variabile în lățimea diviziunii: round(1.5)/2; // Folosind funcția și înălțimea diviziunii: (500px/2); // Folosind paranteze și diviziune margine-stânga: 5px + 8px/2px; // Folosind fontul de adăugare și împărțire: (italic bold 10px/8px); // În listă, paranteza de pe este luată în considerare)
Compilează la:
Introduce: #{}
Puteți utiliza variabile în proprietățile nume și valori folosind #() . De exemplu:
$nume:foo; $attr:border; p.#($nume) ( #($attr)-culoare: albastru; )
Compilează la:
P.foo (culoare-chenar: albastru; )
Directive de control
@dacă
p ( @dacă 1 + 1 == 2 ( chenar: 1px solid; ) @dacă 5< 3 { border: 2px dotted; } @if null { border: 3px double; } }Compilează la:
P (chenar: 1px solid; )
@pentru
@pentru $i de la 1 la 3 ( .item-#($i) ( lățime: 2em * $i; ) )Compilează la:
Item-1 ( lățime: 2em; ) .item-2 ( lățime: 4em; ) .item-3 ( lățime: 6em; )
@fiecare
@each $header, $size în (h1: 2em, h2: 1.5em, h3: 1.2em) ( #($header) ( dimensiunea fontului: $size; ) )Compilează la:
H1 (dimensiunea fontului: 2em; ) h2 (dimensiunea fontului: 1.5em; ) h3 (dimensiunea fontului: 1.2em; )
@in timp ce
$i: 6; @while $i > 0 ( .item-#($i) ( lățime: 2em * $i; ) $i: $i - 2; )Compilează la:
Item-6 ( lățime: 12em; ) .item-4 ( lățime: 8em; ) .item-2 ( lățime: 4em; )
Migurină
Mixin-urile vă permit să definiți stiluri care pot fi reutilizate în toată foaia de stil. Vă puteți gândi la mixin-uri ca funcții într-un alt limbaj de programare. Puteți trece variabile la fel ca în funcțiile oricărui alt limbaj de programare. În SCSS mixin-urile returnează un set Reguli CSS. Puteți folosi mixin-uri ca acesta prin @include numele-mixin definit de directiva @mixin.
Luați în considerare următorul exemplu:
@mixin text mare ( font: ( familie: Arial; dimensiune: 20px; greutate: bold; ) culoare: #ff0000; ) .page-title ( @include text mare; umplutură: 4px; margin-sus: 10px; )
Compilează la:
Titlul paginii (familie de fonturi: Arial; dimensiunea fontului: 20px; greutatea fontului: bold; culoare: #ff0000; umplutură: 4px; margine-top: 10px; )
De asemenea, puteți utiliza mixine compuse, astfel:
@mixin mixin-one (culoare: roșu; ) @mixin mixin-two( width:20px; ) .page-title ( @include mixin-one; @include mixin-two; )
De asemenea, puteți trece variabile în mixuri:
$globel-prefixes:webkit moz ms o; @mixin prefixer ($proprietate,$valoare,$prefixe:null)( @dacă $prefixe==null( @fiecare $prefix în $prefixe-globele ( -#($prefix)-#($proprietate): $valoare; ) ) @else ( @fiecare $prefix în $prefixe ( -#($prefix)-#($proprietate): $valoare; ) ) #($proprietate): $valoare; ) *( @include prefixer(dimensiunea casetei) ,border-box); )
Va fi compilat pentru:
*( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: cutie-chenar; )
Funcții
De asemenea, puteți defini funcții care returnează o valoare. De exemplu.
$numar de coloane:12; $lățimea jgheabului:2%; @function get-column-width($i)( @return (100% - ($numărul-de-coloane/$i - 1) * $lățimea-jgheabului) / $numărul-de-coloane * $i; ) . col-6 ( width:get-column-width(6); )
Va fi compilat pentru:
Col-6 (lățime: 49%; )
Extensii
Veți întâlni o situație în care va trebui să reutilizați stilurile. Luați în considerare următorul exemplu:
Ambele vor avea aceleași stiluri, cu excepția culorii.
Btn( margine:10px; culoare:negru; lățime:200px; înălțime:100px; ) .btn-blue( @extend .btn; fundal:albastru; )
Aceasta se va compila la:
Btn,.btn-blue( margine:10px; culoare:negru; lățime:200px; înălțime:100px; ) .btn-blue( fundal:albastru; )
De asemenea, puteți conecta extensii și utiliza mai multe extensii într-un singur selector CSS.
Dacă nu doriți ca directiva de extensie să fie compilată în CSS, puteți utiliza % înaintea selectorului.
%btn( margine:10px; culoare:negru; lățime:200px; înălțime:100px; ) .btn-blue( @extend %btn; fundal:albastru; ) .btn-red( @extend %btn; fundal:roșu; ) Se va compila la: .btn-blue( margine:10px; culoare:negru; lățime:200px; înălțime:100px; fundal:albastru; ) .btn-red( margine:10px; culoare:negru; lățime:200px; înălțime:100px ; fundal: roșu; )
