On olemas mõningaid CSS-i mõisteid, mis oleks kasulikud, kuid kahjuks ei saa neid rakendada. Üks selline funktsioon on muutujad, mis aitavad sul oma disaini järjepidevana ja hooldatavana hoida. Selles õpetuses näitan sulle, kuidas Sassis muutujaid määratleda ja kasutada, et hallata oma stiililehti tõhusalt.
Olulisemad näitajad
- Sass võimaldab kasutada muutujaid, mis ei ole klassikalises CSS-is saadaval.
- Muutujaid parandavad sinu koodi hooldatavust oluliselt.
- Kesksete muudatuste tõttu muutuja faili saad oma stiilid kiiresti kohandada.
Samuti-sammult juhend
Samuti 1: Uue muutuja faili loomine
Esialgu peaksid looma eraldi faili oma muutujate jaoks. See tagab selge koodi ja lihtsustab edasisi muudatusi. Looge fail nimega config.scss, kus deklareerid kõik oma muutujad.
Samuti 2: Konfiguratsiooni lisamine
Nüüd pead tagama, et see muutujafile on lisatud sinu peafaili (app.scss). See tähendab, et pead importima config.scss faili, et muutujad oleksid kõikjal saadaval.
Samuti 3: Muutujate deklareerimine
Muudatuse deklareerimiseks kasuta dollarimärki $, millele järgneb muutuja nimi. Näiteks võiksid luua värvimuutuja pealkirja jaoks:
Siin $headline-color tähistab muutuja nime ja black värvikoode.
Samuti 4: Kommentaaride lisamine
On mõistlik lisada kommentaare oma muutujatele. Nii säilitad ülevaate iga muutuja eesmärgist. See lihtsustab arusaamist mitte ainult sinule, vaid ka teistele arendajatele, kes võivad sinu projektiga töötada. Näiteks:
Samuti 5: Muutujate kasutamine
Järgmine samm on deklareeritud muutujate kasutamine seal, kus neid vajad. Ava SCSS-fail, kus defineerid oma stiilid ja määra oma pealkirjale ülal deklareeritud värvimuutuja:
Sellega muutub h1-elementide värv muutuja headline-color väärtuseks.
Samuti 6: Muudatuste tegemine
Üks muutuja suurimaid tugevusi on see, et saad teha muudatusi keskse koha peal. Kui soovid näiteks värvi muuta, pead lihtsalt ühes väärtuses config.scss failis muudatuse tegema:
Pärast seda, kui oled seda teinud, rakendatakse uus värv kõikjal, kus oled muutuja oma stiililehes kasutanud.
Samuti 7: Veateadete mõistmine
Veenduge, et sisestaksite oma muutujate nimed täpselt. Lihtne trükiviga võib põhjustada veateateid, mis näitavad, et muutuja on määramata. Kui saad veateate, kontrolli koodi, et veenduda, et muutuja nimi on õigesti kirjutatud.
Samuti 8: Muutujate kasutamine teistes failides
Teine eelis on see, et saad oma muutujad kasutada mistahes SCSS-failides. Kui soovid näiteks teises failis sama värviga pealkirja, siis saad samuti juurdepääsu muutuja headline-color'ile, ilma et peaksid värvi uuesti määrama.
Kokkuvõte
Kokkuvõttes oled selle õpetuse käigus õppinud, kuidas deklareerida ja kasutada muutujaid Sassis. Need võimaldavad sul tõhusalt hallata oma CSS-i stiile ja kohandada mitut elementi ainult ühe muudatusega. See muudab sinu stiililehed mitte ainult hooldatavamaks, vaid ka paindlikumaks disainimuudatuste rakendamisel.
Korduvad küsimused
Kuidas deklareerida muutuja Sassis?Sa saad deklareerida muutuja Sassis, kasutades dollarimärki $ muutuja nime ees, millele järgneb koolon ja väärtus.
Kas pean oma muutujad eraldi faili salvestama?See ei ole tingimata vajalik, kuid soovitatav, et hoida kood puhas ja ülevaatlik.
Kas saan muutujaid kasutada mitmes SCSS-failis?Jah, saad muutujaid kasutada mistahes SCSS-failis, kui fail, kus need on deklareeritud, on imporditud.
Kuidas tegutseda veateadete puhul, mis puudutavad määramata muutujaid?Kontrolli muutuja nime, et veenduda, et pole trükivigu, ja veendu, et fail, kus see deklareeritud, on õigesti lisatud.
Kas muutujaid on CSS-is võimalik kasutada?Praegu ei ole muutujaid vaikimisi CSS-is saadaval, kuid SCSS pakub seda funktsionaalsust hoolduse ja kasutamise lihtsustamiseks.
