CSS on iga veebiarendaja jaoks hädavajalik tööriist. Sass kasutamine laiendab CSS-i võimalusi, võimaldades sul määratleda tingimusi, mis muudavad sinu veebilehe disaini dünaamilisemaks. Selles juhendis õpid, kuidas töötada Sassis if ja else tingimustega, et kohandada oma stiililehti paindlikult ja luua erinevaid disaine sõltuvalt taustavärvist.
Olulised tähelepanekud Sassiga saad tingimuste kasutamise kaudu stiililehtedel tõhusamalt reageerida erinevatele olukordadele. Muutujate loomine ja if, else if ja else kasutamine võimaldab sul CSS-i stiile dünaamiliselt kohandada, lähtudes spetsiifilistest tingimustest.
Samm-sammuline juhend
1. Taustavärvi määramine
Alustame, määrates veebilehe taustavärvi. Sa saad luua muutuja taustavärvi jaoks, mida hiljem kasutatakse tekstivärvi dünaamiliseks kohandamiseks. Määra esmalt muutuja.
Näites loome me muutuja taustavärvi jaoks. Kui näiteks taustavärv on must, siis peaks tekstivärv ja font olema seadistatud kontrastsetele värvidele, et nad oleksid hästi loetavad.
2. Tingimustele reageerimine
Nüüd jõuame tingimuste rakendamise juurde. Sa saad kasutada if-tingimusi, et määrata, millist taustavärvi kasutatakse ja vastavalt muuta tekstivärvi.
Siin seame tingimusena, et kui taustavärv on must, siis määrame tekstivärviks valge. Vastasel juhul kuvatakse tekstivärv mustana, kui taust on valge.
3. Lisatingimuste lisamine
Oma CSS-i reeglite edasiseks arendamiseks saad lisada rohkem juhtumeid else if abil. Nii saad küsida rohkem kui ainult kahte värvi.
Oletame, et soovime lisaks reageerida punasele ja rohelisele taustavärvile. Siin määratled else if tingimused iga nende värvi jaoks ja määrad igaühe jaoks vastava tekstivärvi.
4. Mitme värvi küsimine
Spetsiifilisemaks olles on võimalik küsida mitut spetsiifilist värvi. Sa saad laiendada oma tingimusi, et erinevad värvid mõjutaksid tekstiesitust.
Siin kontrollid, kas taustavärv on punane, roheline, must või valge. Sõltuvalt tagastatust määratakse tekstivärv vastavalt. Kõigi mitte määratletud värvide jaoks saad määrata vaikevärvi.
5. CSS-i omaduste dünaamiline kohandamine
Nüüd, kui tunned põhilisi tingimusi, saad tegelikke CSS-i omadusi dünaamiliselt muuta. See on eriti kasulik, kui soovid katsetada erinevaid paigutusi.
Oletame, et tahad katsetada, kas paigutus peaks olema lehe täitev või mitte. Siin kasutad sa veel ühte if-lause, et kohandada omadusi nagu Margin ja Width vastavalt.
6. Muutujate kasutamine paindlike paigutuste jaoks
Sa saad samuti määratleda muutujaid, et testida erinevaid paigutusi, määrates Boole'i muutuja, mida lõpuks kasutad oma tingimustes.
Näites määratleme muutuja layoutTest, mis – sõltuvalt väärtusest – tagastab erinevad paigutuse omadused. Nii on sul tootlikkus, et muuta oma stiile erinevates tingimustes, ilma palju korduvat koodi kirjutamata.
Kokkuvõte - Kaasaegne CSS Sassiga: Tingimuste efektiivne kasutamine if ja else abil
Selles juhendis oled õppinud, kuidas kasutada tingimusi Sassis if, else if ja else abil. Muutujate loomise ja dünaamiliste stiilide määratlemisega saad oma veebilehte tõhusamalt kujundada. Võime reageerida erinevatele väärtuste olekutele avab sulle mitmekesised rakendusvõimalused sinu CSS-i arenduses.
Korduma kippuvad küsimused
Kuidas määratleda muutuja Sassis?Sa saad määratleda muutuja Sassis $-märgiga, nt $background-color: black;.
Kas ma saan kasutada mitut tingimust korraga?Jah, sa saad kasutada if, else if ja else, et määratleda mitmeid tingimusi.
Kuidas saan paigutusi tingimustega testida?Sassiga saad muutujaid lihtsalt seadistada, et paigutuse omadusi nagu Padding ja Margin vastavalt tingimusele dünaamiliselt muuta.
