Kaj je Sass? Naučite se uporabljati ta jezik razširitve CSS

Sintaktično osupljive slogovne liste (Sass) so priljubljen jezik razširitve CSS. Jezik obstaja že približno 15 let. Dobro deluje z vsako različico CSS, zaradi česar je združljiv z vsako knjižnico in okvirjem CSS, od Bootstrapa do Foundation.

Jezik vam omogoča, da napišete kodo Sass in jo nato prevedete v CSS. Vrednost uporabe Sass namesto navadnega CSS je v tem, da zagotavlja dodatne funkcije, ki so trenutno zunaj obsega CSS.

V tej vadnici se boste naučili uporabljati Sass in njegove najpomembnejše funkcije.

Namestitev Sass

Obstaja več načinov za uporabo Sass na vaši napravi. Ti vključujejo zagon aplikacije (kot je LiveReload ali Scout-App), prenos Sass iz GitHuba, ali pa ga namestite z uporabo npm.

Namestitev Sass z npm

Če želite namestiti Sass z uporabo npm, boste morali namestite NodeJS in npm na vaši napravi. Nato boste morali ustvariti a package.json datoteko (kar je dobra praksa pri namestitvi katerega koli paketa npm v svoje projekte). Ustvarite lahko osnovno package.json datoteko v imeniku projekta z naslednjim terminalskim ukazom:

npm init -y

Izvedba tega ukaza bo ustvarila datoteko package.json z naslednjo vsebino:

{
 "name": "my_app",
 "različica": "1.0.0",
 "opis": "",
 "main": "index.js",
 "skripti": {
 "test": "echo \"Napaka: test ni določen\" && izhod 1"
 },
 "ključne besede": [],
 "avtor": "",
 "licenca": "ISC"
}

The package.json je pomembna, ker služi kot konfiguracija za vaš projekt. Vsakič, ko namestite nov paket npm package.json datoteka bo to odražala.

Zdaj lahko namestite Sass tako, da v svoj terminal vstavite naslednji ukaz:

npm namestite sass

Ta ukaz bo posodobil package.json datoteko tako, da ustvarite novo odvisno polje, ki bo vseboval nov paket Sass. Ustvaril bo tudi novo package-lock.json datoteko in namestite sass (plus odvisnosti) v a node_modules imenik.

Različne vrste datotek Sass

Datoteka Sass ima lahko eno od dveh razširitev, .sass oz .scss. Glavna razlika med njima je v tem, da .scss uporablja kodraste oklepaje in podpičje (podobno kot CSS), medtem ko datoteka .sass datotečne strukture CSS z uporabo zamika (podobno kot Python). Nekateri razvijalci raje uporabljajo .scss datoteke, saj je njena struktura bližja CSS.

Primer datoteke .scss

$primarna barva: modra;
telo {
 barva: $primary-color;
 p {
 barva: rdeča;
 }
}

Primer datoteke .sass

$primarna barva: modra
telo
 barva: $primary-color
 str
 barva: rdeča

Prevajanje datoteke Sass v CSS

Posamezno datoteko Sass lahko sestavite z uporabo drzen program ukazne vrstice:

sass datoteka.scss > datoteka.css

Sass lahko zaženete tudi v vseh datotekah v določenem imeniku:

sass scss: dist/css/

Ta ukaz prevede vse datoteke Sass znotraj scss imenik in shrani nastale datoteke v dist/css.

Če uporabljate npm, lahko nastavite priročno bližnjico za prevajanje sass z uporabo skripte polju v vašem package.json mapa:

"skripti": {
 "test": "echo \"Napaka: ni določen test\" && izhod 1",
 "sass": "sass --watch scss: dist/css/"
 },

Ta konfiguracija uporablja -- pazi možnost. Ohranja delovanje sass in zagotavlja, da te datoteke ponovno prevede, ko se spremenijo. Za vsako datoteko bo sass ustvaril a .css in a .css.map mapa.

Če želite izvesti zgornji skript Sass, boste morali v terminalu izvesti naslednji ukaz:

npm zaženi sass

Zagon tega ukaza bo ustvaril izhod, podoben temu:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Preveden scss\main.scss v dist\css\main.css.
Sass pazi na spremembe. Pritisnite Ctrl-C, da ustavite.

Sass spremenljivke

Danes lahko ustvarite spremenljivke v CSS, vendar pred 15 leti spremenljivke CSS niso obstajale, zato je bila podpora Sass zanje dragocena. Spremenljivke Sass delujejo na enak način kot spremenljivke CSS. Shranjujejo vrednosti (kot so barve), ki jih nameravate uporabiti v celotni datoteki CSS. Ena od glavnih prednosti spremenljivk je, da vam omogočajo posodobitev številnih pojavov vrednosti tako, da jo spremenite na enem mestu.

Vsaka spremenljivka Sass se začne z znakom za dolar, ki mu sledi poljubna kombinacija znakov. Poskusite narediti svoje spremenljivke opisne, na primer $primarna barva zgornji primer. Pomembno je omeniti, da se spremenljivka Sass ne prevede v spremenljivke CSS. Na primer ta datoteka .scss:

$primarna barva: modra;
telo {
 barva: $primary-color;
}

Prevede se v naslednji CSS:

telo {
 barva: modra;
}

Kot lahko vidite iz zgornje datoteke, ni spremenljivk CSS. Prednost spremenljivk je, da bo vsaka sprememba datoteke Sass posodobila ustrezno datoteko CSS.

Sass Mixins

Če imate eno lastnost, ki jo želite večkrat uporabiti v celotnem projektu, je spremenljivka odlična. Če pa imate skupino lastnosti, ki jih želite uporabiti kot enoto, bo mešanica naredila trik.

Vsak mixin se začne z @mixin ključno besedo, ki ji sledi ime, ki ga želite dodeliti mešanici. Imate možnost posredovati spremenljivke v mixin kot parametre in te spremenljivke uporabiti v telesu mixin, na skoraj enak način kot funkcija.

Uporaba Mixina

@mixin svetlobna tema($primarna barva: bela, $sekundarna barva: #2c2c2c) {
 družina pisav: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 barva ozadja: $primary-color;
 barva: $secondary-color;
}
#dom {
 @vključi svetlobno temo (modro);
}

Prva stvar, ki jo boste morda opazili v zgornji kodi, je, da mixin sprejema dva argumenta. Argumentom lahko dodelite privzete vrednosti in jih preglasite, ko jih vključite.

Ko ustvarite svoj mixin, ga lahko uporabite v katerem koli razdelku na svojem spletnem mestu z uporabo @vključi ključno besedo, ki ji sledi ime mešanice.

Prevajanje zgornje kode Sass bo v vaši ciljni datoteki ustvarilo naslednjo kodo CSS:

#dom {
 družina pisav: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 barva ozadja: modra;
 barva: #2c2c2c;
}

Sass funkcije

Poleg različnih ključnih besed je glavna razlika med funkcijo in mešanico ta, da mora funkcija nekaj vrniti. Funkcije Sass lahko uporabite za izračun vrednosti ali izvajanje operacij.

@function add-numbers($num-one, $num-dwo){
 $vsota: 0;
 $vsota: $num-eno + $num-dva;
 @return $sum 
}

Ta zgornja funkcija sprejme dve številki in vrne njuno vsoto. Funkcije Sass lahko vsebujejo celo izjave if, zanke in druge stavke nadzornega toka.

Sass moduli

Če bi morali v isto datoteko vključiti vse svoje spremenljivke, mešanice in funkcije, bi pri ustvarjanju velikih aplikacij imeli ogromno datoteko Sass. Moduli zagotavljajo način za razdelitev velikih datotek na manjše, ki se sass združi med prevajanjem. Na primer, imate lahko funkcijski modul in mešalni modul, vse, kar si morate zapomniti, je @uporaba ključno besedo.

Tukaj je primer, ki prikazuje, kako lahko prejšnji mixin ločite v svojo datoteko:

Datoteka mixins.scss

@mixin svetlobna tema($primarna barva: bela, $sekundarna barva: #2c2c2c) {
 družina pisav: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 barva ozadja: $primary-color;
 barva: $secondary-color;
}

Datoteka main.scss

@uporabi 'mixins';
#doma{
 @vključi mixins.light-theme;
}

Če želite uvoziti in uporabljati zunanjo datoteko kot modul, boste morali uporabiti @uporaba ključno besedo za uvoz. Če želite uporabiti določeno mešanico iz uvožene datoteke, dodajte predpono določenemu imenu mešanice z imenom datoteke, ki mu sledi pika. Prevajanje zgornjih datotek bo ustvarilo naslednjo kodo CSS:

#dom {
 družina pisav: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 barva ozadja: bela;
 barva: #2c2c2c;
}

Uporabite Sass, da razširite in organizirate svoj CSS

Sass je razširitev sintakse CSS. Omogoča vam, da poenostavite svoje slogovne liste in jih učinkoviteje upravljate. Za ustvarjanje učinkovitih modelov pa boste še vedno morali obvladati načela CSS in spletnega oblikovanja.

Ta članek vas uči, kako namestiti in uporabljati Sass. Naučili ste se ustvariti Sass spremenljivke, mešanice, funkcije in module. Zdaj vam preostane le, da ustvarite dokument HTML in opazujete, kako vaša koda Sass zaživi.

8 bistvenih CSS nasvetov in trikov, ki bi jih moral poznati vsak razvijalec

Preberite Naprej

O avtorju