Što je Sass? Naučite kako koristiti ovaj jezik CSS proširenja

Sintaktički sjajni listovi stilova (Sass) popularni su jezik proširenja CSS-a. Jezik postoji oko 15 godina. Dobro radi sa svakom verzijom CSS-a, što ga čini kompatibilnim sa svakom CSS bibliotekom i okvirom, od Bootstrapa do Foundationa.

Jezik vam omogućuje pisanje Sass koda, a zatim prevođenje tog koda u CSS. Vrijednost korištenja Sass-a umjesto običnog CSS-a je da pruža dodatne značajke koje su trenutno izvan dosega CSS-a.

U ovom vodiču naučit ćete kako koristiti Sass i njegove najvažnije značajke.

Instalacija Sass-a

Postoji nekoliko načina za korištenje Sassa na svom uređaju. To uključuje pokretanje aplikacije (kao što je LiveReload ili Scout-App), preuzimanje Sass s GitHuba, ili ga instalirati koristeći npm.

Instalacija Sass-a s npm-om

Da biste instalirali Sass pomoću npm-a, morat ćete instalirajte NodeJS i npm na svom uređaju. Zatim ćete morati stvoriti a paket.json datoteku (što je dobra praksa kada instalirate bilo koji npm paket u svoje projekte). Možete stvoriti osnovnu paket.json datoteku u direktoriju vašeg projekta sa sljedećom terminalskom naredbom:

npm init -y

Izvođenje ove naredbe generirat će datoteku package.json sa sljedećim sadržajem:

{
 "name": "my_app",
 "verzija": "1.0.0",
 "opis": "",
 "main": "index.js",
 "skripte": {
 "test": "echo \"Pogreška: nije naveden test\" && izlaz 1"
 },
 "ključne riječi": [],
 "Autor": "",
 "licenca": "ISC"
}

The paket.json datoteka je važna jer služi kao konfiguracija za vaš projekt. Svaki put kada instalirate novi npm paket paket.json datoteka će to odražavati.

Sada možete instalirati Sass umetanjem sljedeće naredbe u svoj terminal:

npm instaliraj sass

Ova naredba će ažurirati paket.json datoteku stvaranjem novog polje ovisnosti, koji će sadržavati novi paket Sass. Također će generirati novu paket-lock.json datoteku i instalirajte sass (plus ovisnosti) u a čvor_moduli imenik.

Različite vrste datoteka Sass

Sass datoteka može imati jedno od dva nastavka, .sass ili .scss. Glavna razlika između njih je u tome što .scss datoteka koristi vitičaste zagrade i točku-zarez (slično kao CSS), dok .sass strukture datoteka CSS koristeći uvlačenje (slično kao u Pythonu). Neki programeri radije koriste .scss datoteku jer je njena struktura bliža CSS-u.

Primjer .scss datoteke

$primarna-boja: plava;
tijelo {
 boja: $primary-color;
 p {
 boja: crvena;
 }
}

Primjer datoteke .sass

$primarna boja: plava
tijelo
 boja: $primary-color
 str
 boja: crvena

Sastavljanje Sass datoteke u CSS

Možete sastaviti pojedinačnu Sass datoteku koristeći drsko program naredbenog retka:

sass datoteka.scss > datoteka.css

Također možete pokrenuti sass na svim datotekama unutar određenog direktorija:

sass scss: dist/css/

Ta naredba kompajlira sve Sass datoteke unutar scss direktorij i pohranjuje rezultirajuće datoteke u dist/css.

Ako koristite npm, možete postaviti zgodan prečac za sass kompilaciju pomoću skripte polju u vašem paket.json datoteka:

"skripte": {
 "test": "echo \"Pogreška: nije naveden test\" && izlaz 1",
 "sass": "sass --watch scss: dist/css/"
 },

Ova konfiguracija koristi --Gledati opcija. Održava sass rad i osigurava da ponovno kompajlira te datoteke kad god se promijene. Za svaku datoteku, sass će generirati a .css i a .css.mapa datoteka.

Da biste izvršili gornju Sass skriptu, morat ćete izvršiti sljedeću naredbu u svom terminalu:

npm run sass

Izvođenje te naredbe generirat će izlaz sličan ovome:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --pogledajte scss: dist/css/
Prevedeno scss\main.scss u dist\css\main.css.
Sass pazi na promjene. Pritisnite Ctrl-C za zaustavljanje.

Sass varijable

Danas možete kreirati varijable u CSS-u, ali prije 15 godina CSS varijable nisu postojale, pa je podrška Sass-a za njih bila dragocjena. Sass varijable djeluju na isti način kao i CSS varijable. Oni pohranjuju vrijednosti (kao što su boje) koje namjeravate koristiti u cijeloj CSS datoteci. Jedna od glavnih prednosti varijabli je da vam omogućuju ažuriranje mnogih pojavljivanja vrijednosti mijenjajući je na samo jednom mjestu.

Svaka Sass varijabla počinje znakom dolara, nakon čega slijedi bilo koja kombinacija znakova. Pokušajte svoje varijable učiniti opisnim, poput $primarna boja primjer iznad. Važno je napomenuti da se varijabla Sass ne kompajlira u CSS varijable. Na primjer, ova .scss datoteka:

$primarna-boja: plava;
tijelo {
 boja: $primary-color;
}

Prevesti će se u sljedeći CSS:

tijelo {
 boja: plava;
}

Kao što možete vidjeti iz gornje datoteke, nema CSS varijabli. Prednost varijabli je da će svaka izmjena napravljena na Sass datoteci ažurirati odgovarajuću CSS datoteku.

Sass Mixins

Ako imate jedno svojstvo koje želite koristiti nekoliko puta tijekom svog projekta, onda je varijabla odlična. Ali ako imate grupu svojstava koju želite koristiti kao jedinicu, mixin će učiniti trik.

Svaki mixin počinje s @mixin ključnu riječ, nakon čega slijedi naziv koji želite dodijeliti mixinu. Imate mogućnost prosljeđivanja varijabli u mixin kao parametara i korištenje tih varijabli unutar tijela mixina, na isti način kao i funkcija.

Korištenje Mixina

@mixin svjetlosna tema ($primarna-boja: bijela, $sekundarna-boja: #2c2c2c) {
 obitelj fontova: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 boja pozadine: $primary-color;
 boja: $sekundarna-boja;
}
#Dom {
 @uključi svjetlosnu temu (plava);
}

Prva stvar koju biste mogli primijetiti u gornjem kodu je da mixin prihvaća dva argumenta. Možete dodijeliti zadane vrijednosti argumentima i nadjačati ih kada ih uključite.

Nakon što izradite svoj mixin, možete ga koristiti u bilo kojem odjeljku na svojoj web stranici pomoću @uključi ključnu riječ nakon koje slijedi naziv mixina.

Sastavljanje Sass koda iznad će generirati sljedeći CSS kod u vašoj odredišnoj datoteci:

#Dom {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 boja pozadine: plava;
 boja: #2c2c2c;
}

Sass funkcije

Osim različitih ključnih riječi, glavna razlika između funkcije i mixina je u tome što funkcija mora nešto vratiti. Možete koristiti Sass funkcije za izračunavanje vrijednosti ili izvođenje operacija.

@funkcija add-brojevi ($num-jedan, $num-dva){
 $zbroj: 0;
 $zbroj: $num-jedan + $num-dva;
 @povrat $sum 
}

Ova gornja funkcija prihvaća dva broja i vraća njihov zbroj. Sass funkcije mogu čak sadržavati if naredbe, for petlje i druge naredbe toka kontrole.

Sass moduli

Ako biste morali uključiti sve svoje varijable, mikseve i funkcije u istu datoteku, imali biste masivnu Sass datoteku prilikom izrade velikih aplikacija. Moduli pružaju način za podjelu velikih datoteka u manje koje se sass kombinira tijekom kompilacije. Na primjer, možete imati funkcionalni modul i mixin modul, sve što trebate zapamtiti je @koristiti ključna riječ.

Evo primjera koji pokazuje kako možete odvojiti prethodni mixin u njegovu vlastitu datoteku:

Datoteka mixins.scss

@mixin svjetlosna tema ($primarna-boja: bijela, $sekundarna-boja: #2c2c2c) {
 obitelj fontova: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 boja pozadine: $primary-color;
 boja: $sekundarna-boja;
}

Datoteka main.scss

@use 'mixins';
#Dom{
 @include mixins.light-theme;
}

Za uvoz i korištenje vanjske datoteke kao modula, morat ćete koristiti @koristiti ključnu riječ za uvoz. Zatim, da biste upotrijebili određeni mixin iz uvezene datoteke, stavite prefiks određenom nazivu miksa s nazivom datoteke nakon kojeg slijedi točka. Prevođenje gornjih datoteka generirat će sljedeći CSS kod:

#Dom {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 boja pozadine: bijela;
 boja: #2c2c2c;
}

Koristite Sass da proširite i organizirate svoj CSS

Sass je proširenje CSS-ove sintakse. Omogućuje vam da pojednostavite svoje stilove i učinkovitije upravljate njima. Ali i dalje ćete morati posjedovati CSS i principe web dizajna kako biste stvorili učinkovit dizajn.

Ovaj članak vas uči kako instalirati i koristiti Sass. Naučili ste kako stvoriti Sass varijable, miksine, funkcije i module. Sada sve što vam preostaje je stvoriti HTML dokument i gledati kako vaš Sass kod oživljava.

8 osnovnih CSS savjeta i trikova koje bi svaki programer trebao znati

Pročitajte dalje

O autoru