Preprocesor Sass. Un ghid complet și de ce aveți nevoie de el. Sass pentru cei mici - un ghid detaliat

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 separat Ruby ș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 scss

Parț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. 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; width: $width/2; // Utilizarea variabilelor în lățimea diviziunii: rotund(1.5)/2; // Folosind funcția și înălțimea diviziunii: ( 500px/2); // Folosind paranteze și marginea de divizare-stânga: 5px + 8px/2px; // Folosind fontul de adăugare și divizare: (italic bold 10px/8px); // În listă, paranteza nu 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; )

Hagfish

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 de 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-top: 10px; )

Compilează la:

Titlul paginii (familie de fonturi: Arial; dimensiunea fontului: 20px; greutatea fontului: bold; culoare: #ff0000; umplutură: 4px; marginea de sus: 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:

Normal Albastru

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( margin:10px; culoare:negru; lățime:200px; înălțime:100px; fundal:albastru; ) .btn-red( margin:10px; culoare:negru; lățime:200px; înălțime:100px ; fundal: roșu; )

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 formare Stiluri CSS, ceea ce simplifică foarte mult sarcina de a dezvolta și, ulterior, menținerea 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;
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(
greutatea fontului: 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 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(
greutatea fontului: 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 î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).

Migurină.

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 mixinelor este foarte simplă - după cuvânt cheie@include specificați numele mixului 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;
raza-chenar: 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 fără a instala mai întâi platforma în sine și managerul de pachete al acestei limbi Programare Ruby Bijuteriile sunt indispensabile. 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 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.)

Înainte de a putea folosi 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-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:

  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 : niciunul li display : inline-block a display : block padding : 6px 12px text-decoration : niciunul

  Ați observat că selectoarele ul , li și a sunt imbricate în selectorul de navigare? Acest metodă grozavă faceți fișierul dvs. 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 : #efefef

  Reț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 deasupra, adesea 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-chenarului ($raza ) -webkit-raza-chenarului : $raza -moz-raza-chenarului : $raza -ms-raza-chenarului : $raza raza-limitei : $raza .box +raza-chenarului (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 - acest lucru va menține CSS-ul dvs. 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 : verde ; ) .error ( @extend %message-shared ; border-color : roșu ; ) .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 : galben

  Codul 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% ; )

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 că este pentru profesioniști super avansați în aspect. Da, folosirea preprocesoarelor este un pas către un nou nivel în dezvoltarea web, dar nu este nimic înfricoșător sau complicat aici și vei vedea singur după ce termini de 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 proiectate pentru a scuti dezvoltatorul de majoritatea sarcini de rutină la scrierea codului, 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 activată 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) Limba rubin. 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 codul Css obișnuit, iar Sass elimină 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

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent ( .main-title ( dimensiunea fontului: 30px; greutatea fontului: 700; marginea: 0 0 30px; ) .description ( margin-bottom: 30px; p ( culoare: #444444; dimensiunea fontului: 16px; linie) -înălțime: 22px; ) ) )

În majoritatea editorilor de cod (de exemplu, Text sublim) există marcaj 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 de părinți, 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

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

Sass

.principal .title dimensiunea fontului: 30px culoare: #444 .subtitle font-size: 20px .description dimensiunea fontului: 14px margin-bottom: 30px

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

.main .title margin: sus: 10px dreapta: 15px jos: 10px stânga: 15px

Css

.principal .title ( margine-sus: 10px; margine-dreapta: 15px; margine-jos: 10px; margine-stânga: 15px; )

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; marginea inferioară: 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ă-l mutați la rădăcină, dar pentru a nu rupe cuibărirea, îl 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, atunci va trebui să specificați toate culorile butoanelor din stilurile de bază, separate prin virgule, sau să creați o clasă de bază. Dar în Sass este mult mai ușor:

%buton-culoare de 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 fundalului: verde; culoarea marginii: verde; ) .buton-roșu (culoarea fundalului: roșu; culoarea marginii: roșu; )

Ș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 se dorește, 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 în tot documentul, trebuie să specificați un 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 declari și să introduci o valoare, apoi le poți folosi atât cât vrei, 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 în 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 acest exemplu, am făcut 2 pătrate 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 în 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 importul 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 la maximum, vei înțelege acest lucru.

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"); )

A indica 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 la 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("imagini/imagine-peisaj.jpg"); ) .elem-item-landscape ( imagine de fundal: url("imagini/imagine-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ă mergem în sus pe măsură ce ne îndreptăm.

Cu aceasta vreau să închei scurta mea recenzie. Preprocesor 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...