Ce este Sass? Aflați cum să utilizați acest limbaj de extensie CSS

Foile de stil sintactic minunate (Sass) sunt un limbaj popular de extensie CSS. Limba există de aproximativ 15 ani. Funcționează bine cu fiecare versiune de CSS, făcându-l compatibil cu fiecare bibliotecă și cadru CSS, de la Bootstrap la Foundation.

Limbajul vă permite să scrieți cod Sass și apoi să compilați acel cod în CSS. Valoarea utilizării Sass în loc de CSS simplu este că oferă caracteristici suplimentare care sunt în prezent în afara domeniului de aplicare al CSS.

În acest tutorial, veți învăța cum să utilizați Sass și cele mai importante caracteristici ale sale.

Instalarea Sass

Există mai multe moduri de a utiliza Sass pe dispozitivul dvs. Acestea includ rularea unei aplicații (cum ar fi LiveReload sau Scout-App), descărcarea Sass din GitHub, sau instalarea acestuia folosind npm.

Instalarea Sass cu npm

Pentru a instala Sass folosind npm, va trebui instalați NodeJS și npm pe dispozitivul dvs. Apoi va trebui să creați un pachet.json fișier (care este o practică bună atunci când instalați orice pachet npm în proiectele dvs.). Puteți crea un element de bază

pachet.json fișier în directorul de proiect cu următoarea comandă de terminal:

npm init -y

Executarea acestei comenzi va genera un fișier package.json cu următorul conținut:

{
 „nume”: „aplicația_mea”,
 "versiunea": "1.0.0",
 "Descriere": "",
 "principal": "index.js",
 „scripturi”: {
 "test": "echo \"Eroare: nu a fost specificat niciun test\" && ieșire 1"
 },
 "Cuvinte cheie": [],
 "autor": "",
 "license": "ISC"
}

The pachet.json fișierul este important deoarece servește ca configurație pentru proiectul dvs. De fiecare dată când instalați un nou pachet npm, pachet.json fișierul va reflecta acest lucru.

Acum puteți instala Sass inserând următoarea comandă în terminal:

npm instalează sass

Această comandă va actualiza pachet.json fișier prin crearea unui fișier nou câmp de dependență, care va conține noul pachet Sass. De asemenea, va genera un nou package-lock.json fișier și instalați sass (plus dependențe) într-un module_noduri director.

Diferite tipuri de fișiere Sass

Un fișier Sass poate avea una dintre cele două extensii, .sss sau .scss. Principala diferență dintre ele este că .scss fișierul folosește acolade și punct și virgulă (la fel ca CSS), în timp ce fișierul .sss structuri de fișiere CSS folosind indentare (la fel ca Python). Unii dezvoltatori preferă să folosească .scss fișier deoarece structura sa este mai apropiată de CSS.

Un exemplu de fișier .scss

$culoare-primara: albastru;
corp {
 culoare: $culoare-primara;
 p {
 culoarea rosie;
 }
}

Un exemplu de fișier .sass

$culoare primară: albastru
corp
 culoare: $culoare primară
 p
 culoarea rosie

Compilarea unui fișier Sass în CSS

Puteți compila un fișier Sass individual folosind sass program de linie de comandă:

sass file.scss > file.css

De asemenea, puteți rula sass în toate fișierele dintr-un anumit director:

sass scss: dist/css/

Această comandă compilează toate fișierele Sass din scss director și stochează fișierele rezultate în dist/css.

Dacă utilizați npm, puteți configura o comandă rapidă convenabilă pentru compilarea sass folosind scenarii câmp din dvs pachet.json fişier:

„scripturi”: {
 "test": "echo \"Eroare: nu a fost specificat niciun test\" && ieșire 1",
 "sass": "sass --watch scss: dist/css/"
 },

Această configurație folosește --ceas opțiune. Continuă să ruleze sass și se asigură că recompilează acele fișiere ori de câte ori se schimbă. Pentru fiecare fișier, sass va genera un .css si a .css.hartă fişier.

Pentru a executa scriptul Sass de mai sus, va trebui să executați următoarea comandă în terminalul dvs.:

npm alerga sass

Rularea acelei comenzi va genera rezultate similare cu aceasta:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Scss\main.scss compilat în dist\css\main.css.
Sass urmărește schimbări. Apăsați Ctrl-C pentru a opri.

Variabile Sass

Puteți crea variabile în CSS astăzi, dar în urmă cu 15 ani variabilele CSS nu existau, așa că suportul Sass pentru ele a fost valoros. Variabilele Sass funcționează în același mod ca variabilele CSS. Acestea stochează valori (cum ar fi culorile) pe care intenționați să le utilizați într-un fișier CSS. Unul dintre principalele avantaje ale variabilelor este că vă permit să actualizați mai multe apariții ale unei valori prin schimbarea acesteia într-un singur loc.

Fiecare variabilă Sass începe cu semnul dolar, urmat de orice combinație de caractere. Încercați să vă faceți variabilele descriptive, cum ar fi $culoare primară exemplu de mai sus. Este important de reținut că o variabilă Sass nu se compilează în variabile CSS. De exemplu, acest fișier .scss:

$culoare-primara: albastru;
corp {
 culoare: $culoare-primara;
}

Se va compila în următorul CSS:

corp {
 Culoarea albastra;
}

După cum puteți vedea din fișierul de mai sus, nu există variabile CSS. Avantajul variabilelor este că orice modificare adusă fișierului Sass va actualiza fișierul CSS corespunzător.

Sass Mixins

Dacă aveți o proprietate pe care doriți să o utilizați de mai multe ori pe parcursul proiectului, atunci o variabilă este grozavă. Dar dacă aveți un grup de proprietăți pe care doriți să le utilizați ca unitate, un mixin va face truc.

Fiecare mixin începe cu @mixin cuvânt cheie, urmat de numele pe care doriți să-l atribuiți mixin-ului. Aveți opțiunea de a trece variabile mixin-ului ca parametri și de a utiliza acele variabile în corpul mixin-ului, în același mod ca o funcție.

Folosind un Mixin

@mixin light-theme($culoare primară: alb, $culoare secundară: #2c2c2c) {
 familie de fonturi: „Franklin Gothic Medium”, „Arial Narrow”, Arial, sans-serif;
 culoare-fond: $culoare-primară;
 culoare: $culoare-secundară;
}
#Acasă {
 @include light-theme (albastru);
}

Primul lucru pe care l-ați putea observa în codul de mai sus este că mixin-ul acceptă două argumente. Puteți să atribuiți valori implicite argumentelor și să le înlocuiți atunci când le includeți.

După ce v-ați creat mixin-ul, îl puteți utiliza în orice secțiune de pe site-ul dvs. folosind @include cuvânt cheie urmat de numele mixin-ului.

Compilarea codului Sass de mai sus va genera următorul cod CSS în fișierul dvs. de destinație:

#Acasă {
 font-family: „Franklin Gothic Medium”, „Arial Narrow”, Arial, sans-serif;
 culoare de fundal: albastru;
 culoare: #2c2c2c;
}

Funcții Sass

În afară de diferitele cuvinte cheie, principala diferență dintre o funcție și un mixin este că o funcție trebuie să returneze ceva. Puteți utiliza funcțiile Sass pentru a calcula valori sau pentru a efectua operații.

@funcție numere-adăugați ($număr-unu, $număr-doi){
 $sum: 0;
 $sum: $numar-unu + $numar-doi;
 @return $sum 
}

Această funcție de mai sus acceptă două numere și returnează suma lor. Funcțiile Sass pot conține chiar și instrucțiuni if, bucle for și alte instrucțiuni de flux de control.

Module Sass

Dacă ar trebui să includeți toate variabilele, mixurile și funcțiile în același fișier, ați avea un fișier Sass masiv atunci când creați aplicații mari. Modulele oferă o modalitate de a împărți fișierele mari în altele mai mici pe care sass le combină în timpul compilării. De exemplu, puteți avea un modul funcțional și un modul mixin, tot ce trebuie să vă amintiți este @utilizare cuvânt cheie.

Iată un exemplu care arată cum puteți separa mixul anterior în propriul fișier:

Fișierul mixins.scss

@mixin light-theme($culoare primară: alb, $culoare secundară: #2c2c2c) {
 familie de fonturi: „Franklin Gothic Medium”, „Arial Narrow”, Arial, sans-serif;
 culoare-fond: $culoare-primară;
 culoare: $culoare-secundară;
}

Fișierul main.scss

@utilizați „mixine”;
#Acasă{
 @include mixins.light-theme;
}

Pentru a importa și utiliza un fișier extern ca modul, va trebui să utilizați @utilizare cuvânt cheie pentru a-l importa. Apoi, pentru a utiliza un anumit mixin din fișierul importat, prefixați numele mixin-ului specific cu numele fișierului urmat de un punct. Compilarea fișierelor de mai sus va genera următorul cod CSS:

#Acasă {
 font-family: „Franklin Gothic Medium”, „Arial Narrow”, Arial, sans-serif;
 culoare de fundal: alb;
 culoare: #2c2c2c;
}

Utilizați Sass pentru a extinde și a organiza CSS

Sass este o extensie a sintaxei CSS. Vă permite să vă simplificați foile de stil și să le gestionați mai eficient. Dar va trebui totuși să cunoașteți CSS și principiile de design web pentru a crea modele eficiente.

Acest articol vă învață cum să instalați și să utilizați Sass. Ați învățat cum să creați variabile, mixuri, funcții și module Sass. Acum, tot ce vă mai rămâne de făcut este să creați un document HTML și să urmăriți cum codul dvs. Sass prinde viață.

8 sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

Citiți în continuare

Despre autor