Mis on Sass? Õppige seda CSS-i laienduskeelt kasutama

Süntaktiliselt vinged stiililehed (Sass) on populaarne CSS-i laienduskeel. Keel on eksisteerinud umbes 15 aastat. See töötab hästi iga CSS-i versiooniga, muutes selle ühilduvaks iga CSS-i teegi ja raamistikuga, alates Bootstrapist kuni Foundationini.

Keel võimaldab teil kirjutada Sassi koodi ja seejärel selle koodi CSS-iks kompileerida. Sassi kasutamise väärtus tavalise CSS-i asemel seisneb selles, et see pakub lisafunktsioone, mis praegu CSS-i ulatusest välja jäävad.

Sellest õpetusest saate teada, kuidas kasutada Sassi ja selle kõige olulisemaid funktsioone.

Sassi installimine

Seadmes Sassi kasutamiseks on mitu võimalust. Nende hulka kuuluvad rakenduse (nt LiveReload või Scout-App) käitamine, allalaadimine Sass GitHubistvõi selle installimine kasutades npm.

Sassi installimine npm-iga

Sassi installimiseks npm-i abil peate seda tegema installige NodeJS ja npm teie seadmes. Seejärel peate looma a package.json faili (mis on hea tava projektidesse mis tahes npm-paketi installimisel). Saate luua põhi package.json faili oma projekti kataloogis järgmise terminalikäsuga:

npm init -y

Selle käsu täitmine genereerib järgmise sisuga faili package.json:

{
 "nimi": "minu_rakendus",
 "version": "1.0.0",
 "kirjeldus": "",
 "main": "index.js",
 "skriptid": {
 "test": "echo \"Viga: testi pole määratud\" && välju 1"
 },
 "märksõnad": [],
 "autor": "",
 "litsents": "ISC"
}

The package.json fail on oluline, kuna see toimib teie projekti konfiguratsioonina. Iga kord, kui installite uue npm-paketi package.json fail kajastab seda.

Nüüd saate Sassi installida, sisestades oma terminali järgmise käsu:

npm install sass

See käsk värskendab package.json faili, luues uue sõltuvusväli, mis sisaldab uut Sassi paketti. See loob ka uue package-lock.json faili ja installige sass (pluss sõltuvused) a-sse sõlme_moodulid kataloog.

Sassi-faili erinevat tüüpi

Sassi failil võib olla üks kahest laiendist, .sass või .scss. Peamine erinevus nende vahel on see .scss fail kasutab lokkis sulgusid ja semikooloneid (sarnaselt CSS-iga), samas kui .sass failistruktuurid CSS-i kasutades taanet (nagu Python). Mõned arendajad eelistavad kasutada .scss faili, kuna selle struktuur on CSS-ile lähemal.

Scss-faili näide

$põhivärv: sinine;
keha {
 värv: $primary-color;
 p {
 värv: punane;
 }
}

.sass faili näide

$põhivärv: sinine
keha
 värv: $primary-color
 lk
 värvus: punane

Sassi faili kompileerimine CSS-i

Saate koostada individuaalse Sassi faili, kasutades sass käsurea programm:

sass fail.scss > fail.css

Sassi saate käitada ka kõigis kindlas kataloogis olevates failides:

sass scss: dist/css/

See käsk kompileerib kõik failis olevad Sassi failid scss kataloogi ja salvestab saadud failid sinna dist/css.

Kui kasutate npm-i, saate seadistada mugava otsetee sassi kompileerimiseks, kasutades skriptid valdkonnas teie package.json fail:

"skriptid": {
 "test": "echo \"Viga: testi pole määratud\" && välju 1",
 "sass": "sass -- vaata scss: dist/css/"
 },

See konfiguratsioon kasutab --vaata valik. See hoiab sassi töös ja tagab, et kompileerib need failid uuesti, kui need muutuvad. Iga faili jaoks genereerib sass a .css ja a .css.map faili.

Ülaltoodud Sassi skripti käivitamiseks peate oma terminalis täitma järgmise käsu:

npm jooksma sass

Selle käsu käivitamine loob sarnase väljundi:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass -- vaata scss: dist/css/
Kompileeritud scss\main.scss failiks dist\css\main.css.
Sass jälgib muutusi. Peatamiseks vajutage Ctrl-C.

Sassi muutujad

Tänapäeval saab CSS-is muutujaid luua, kuid 15 aastat tagasi polnud CSS-i muutujaid olemas, seega oli Sassi tugi neile väärtuslik. Sassi muutujad toimivad samamoodi nagu CSS-muutujad. Need salvestavad väärtused (nt värvid), mida kavatsete kasutada kogu CSS-failis. Muutujate üks peamisi eeliseid on see, et need võimaldavad teil värskendada paljusid väärtuse esinemisi, muutes seda vaid ühes kohas.

Iga Sassi muutuja algab dollarimärgiga, millele järgneb mis tahes tähemärkide kombinatsioon. Proovige muuta oma muutujad kirjeldavaks, näiteks $põhivärv näide ülalt. Oluline on märkida, et Sassi muutujat ei kompileerita CSS-i muutujateks. Näiteks see .scss-fail:

$põhivärv: sinine;
keha {
 värv: $primary-color;
}

Kompileeritakse järgmisele CSS-ile:

keha {
 värv: sinine;
}

Nagu ülaltoodud failist näha, pole CSS-i muutujaid. Muutujate eeliseks on see, et kõik Sassi failis tehtud muudatused värskendavad vastavat CSS-faili.

Sass Mixins

Kui teil on üks omadus, mida soovite oma projekti jooksul mitu korda kasutada, on muutuja suurepärane. Kuid kui teil on atribuutide rühm, mida soovite üksusena kasutada, ajab miksin asja ära.

Iga segamine algab tähega @mixin märksõna, millele järgneb nimi, mille soovite mixinile määrata. Teil on võimalus edastada muutujad mixinile parameetritena ja kasutada neid muutujaid mixini põhiosas, samamoodi nagu funktsioonina.

Mixini kasutamine

@mixin light-theme($esmane värv: valge, $teine ​​värv: #2c2c2c) {
 fondiperekond: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 taustavärv: $primary-color;
 värv: $sekundaarne värv;
}
#Kodu {
 @include hele-teema (sinine);
}

Esimene asi, mida võite ülaltoodud koodis märgata, on see, et mixin aktsepteerib kahte argumenti. Saate argumentidele määrata vaikeväärtused ja nende kaasamisel alistada.

Kui olete mixini loonud, saate seda kasutada oma veebisaidi mis tahes jaotises, kasutades @kaasa märksõna, millele järgneb mixini nimi.

Ülaltoodud Sassi koodi kompileerimine loob teie sihtfailis järgmise CSS-koodi:

#Kodu {
 fondiperekond: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 taustavärv: sinine;
 värv: #2c2c2c;
}

Sassi funktsioonid

Lisaks erinevatele märksõnadele on funktsiooni ja miksini peamine erinevus see, et funktsioon peab midagi tagastama. Väärtuste arvutamiseks või toimingute tegemiseks saate kasutada Sassi funktsioone.

@function add-numbers($num-one, $num-two){
 $summa: 0;
 $summa: $arv-üks + $arv-kaks;
 @return $summa 
}

See ülaltoodud funktsioon aktsepteerib kahte arvu ja tagastab nende summa. Sassi funktsioonid võivad sisaldada isegi if-lauseid, silmuseid ja muid juhtimisvoo lauseid.

Sassi moodulid

Kui peaksite lisama kõik muutujad, segud ja funktsioonid samasse faili, oleks teil suurte rakenduste loomisel tohutu Sassi fail. Moodulid pakuvad võimalust jagada suured failid väiksemateks, mida kompileerimise ajal sass kombineerib. Näiteks võib teil olla funktsioonimoodul ja mixin moodul, peate meeles pidama ainult @kasuta märksõna.

Siin on näide, mis näitab, kuidas saate eelmise segu eraldi failiks eraldada:

Fail mixins.scss

@mixin light-theme($esmane värv: valge, $teine ​​värv: #2c2c2c) {
 fondiperekond: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 taustavärv: $primary-color;
 värv: $sekundaarne värv;
}

Main.scss fail

@kasuta 'mixiine';
#Kodu{
 @include mixins.light-theme;
}

Välise faili importimiseks ja moodulina kasutamiseks peate kasutama @kasuta märksõna selle importimiseks. Seejärel lisage imporditud failist konkreetse miksini kasutamiseks konkreetse mixini nime ees failinimi, millele järgneb punkt. Ülaltoodud failide kompileerimine genereerib järgmise CSS-koodi:

#Kodu {
 fondiperekond: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 taustavärv: valge;
 värv: #2c2c2c;
}

Kasutage Sassi oma CSS-i laiendamiseks ja korraldamiseks

Sass on CSS-i süntaksi laiendus. See võimaldab teil stiililehti sujuvamaks muuta ja neid tõhusamalt hallata. Kuid tõhusa kujunduse loomiseks peate siiski valdama CSS-i ja veebidisaini põhimõtteid.

See artikkel õpetab teile, kuidas Sassi installida ja kasutada. Olete õppinud, kuidas luua Sassi muutujaid, miksine, funktsioone ja mooduleid. Nüüd ei jää teil muud üle kui luua HTML-dokument ja vaadata, kuidas teie Sassi kood ellu ärkab.

8 olulist CSS-i nõuannet ja nippi, mida iga arendaja peaks teadma

Loe edasi

Autori kohta