Efektīva mainīgo izmantošana Sass

Ir daži CSS koncepti, kas būtu noderīgi, taču diemžēl tos nevar īstenot. Viens no šiem funkcijām ir mainīgās, kas palīdzēs tev padarīt tavu dizainu konsekventu un viegli uzturamu. Šajā apmācībā es parādīšu, kā tu vari Sass definēt un izmantot mainīgos, lai efektīvi pārvaldītu savus stilu lapas.

Galvenās atziņas

• Sass ļauj izmantot mainīgos, kas nav pieejami klasiskajā CSS.
• Mainīgie ievērojami uzlabo tava koda uzturējamību.
• Veicot centralizētus labojumus mainīgo failā, tu vari ļoti ātri pielāgot savus stilus.

Soļu pa soļiem rokasgrāmata

1. solis: Izveidot jaunu mainīgo failu

Pirmkārt, tev jāizveido atsevišķs fails saviem mainīgajiem. Tas nodrošinās pārskatāmu kodu un atvieglos nākotnes izmaiņas. Veido failu ar nosaukumu config.scss, kur tu deklarēsi visus savus mainīgos.

2. solis: Iekļaut konfigurāciju

Tagad tev jāpārliecinās, ka šis mainīgo fails ir iekļauts tavā galvenajā failā (app.scss). Tas nozīmē, ka tu importē config.scss failu, lai mainīgie būtu pieejami visur.

3. solis: Deklarēt mainīgos

Lai deklarētu mainīgo, tu izmanto dolāra zīmi $, kam seko mainīgā nosaukums. Piemēram, tu vari izveidot krāsas mainīgo virsrakstam:

$headline-color: black;

Šajā gadījumā $headline-color apzīmē mainīgā nosaukumu, bet black ir krāsas vērtība.

4. solis: Pievienot komentārus

Ir lietderīgi pievienot komentārus saviem mainīgajiem. Tā tu saglabā pārskatu par katra mainīgā mērķi. Tas atvieglo ne tikai sapratni tev pašam, bet arī citiem izstrādātājiem, kas iespējams strādā pie tava projekta. Piemēram:

// Krāsa virsrakstam
$headline-color: black;

5. solis: Izmantot mainīgos

Nākamais solis ir izmantot deklarētos mainīgos tur, kur tie nepieciešami. Atver SCSS failu, kurā tu definē savus stilus, un piešķir savai virsrakstam iepriekš deklarēto krāsas mainīgo:

h1 { color: $headline-color;
}

Ar šo komandu h1 elementu krāsa tiks iestatīta uz headline-color mainīgā vērtību.

6. solis: Veikt izmaiņas

Viens no lielākajiem mainīgo spēkiem ir tas, ka tu vari veikt izmaiņas centrālā vietā. Ja, piemēram, tu vēlies mainīt krāsu, tev jānospiež tikai vērtība config.scss failā:

$headline-color: red;

Pēc tam, kad tu to esi izdarījis, jaunā krāsa tiks piemērota visur, kur tu izmantoji mainīgo savā stilā.

7. solis: Saprast kļūdu ziņojumus

Pārliecinies, ka tu precīzi ievadi savu mainīgo nosaukumus. Vienkārša drukas kļūda var radīt kļūdu ziņojumus, kas norāda, ka mainīgais nav definēts. Ja tu saņem kļūdu, pārbaudi kodu, lai pārliecinātos, ka mainīgā nosaukums ir pareizi uzrakstīts.

8. solis: Izmantot mainīgos citos failos

Vēl viens ieguvums ir tas, ka tu vari izmantot savus mainīgos jebkurā SCSS failā. Ja tu vēlies, piemēram, citā failā iegūt virsrakstu ar to pašu krāsu, tu vari piekļūt arī headline-color mainīgajam, nepārvērtējot krāsu atkārtoti.

Kopsavilkums

Kopsavilkumā tu šajā apmācībā esi iemācījies, kā deklarēt un izmantot mainīgos Sass. Tie ļauj tev efektīvi pārvaldīt savus CSS stilus un pielāgot vairākus elementus ar tikai vienu izmaiņu. Tas padara tavus stilus ne tikai vieglāk uzturamus, bet arī elastīgākus dizaina izmaiņu veikšanā.