CSS yra nepakeičiama priemonė kiekvienam interneto kūrėjui. Naudojant Sass plečiasi CSS galimybės, nes jis leidžia tau apibrėžti sąlygas, kurios padaro tavo svetainės dizainą dinamiškesnį. Šioje instrukcijoje tu sužinosi, kaip dirbti su if ir else sąlygomis Sass, siekiant lanksčiai pritaikyti savo stilių lapus ir sukurti skirtingus dizainus priklausomai nuo fono spalvos.
Pagrindinės įžvalgos Naudojant Sass, tu gali efektyviau reaguoti į skirtingas situacijas naudojant sąlygas savo stilių lapuose. Kintamųjų kūrimas ir if, else if bei else naudojimas leidžia dinamiškai keisti CSS stilius, remiantis specifinėmis sąlygomis.
Žingsnis po žingsnio instrukcija
1. Fono spalvos nustatymas
Pradėkime nuo fono spalvos nustatymo svetainėje. Tu gali sukurti kintamąjį fono spalvai, kuris vėliau bus naudojamas dinamiškai keisti teksto spalvą. Pirmiausia apibrėžk kintamąjį.
Pavyzdyje mes sukuriame kintamąjį fono spalvai. Jei, pavyzdžiui, fono spalva yra juoda, teksto spalva ir šriftas turėtų būti nustatyti į kontrastingą spalvą, kad jie būtų lengvai skaitomi.
2. Reagavimas į sąlygas
Dabar pereikime prie sąlygų taikymo. Tu gali naudoti if sąlygas, kad nustatytum, kokia fono spalva naudojama, ir atitinkamai pakeisti teksto spalvą.
Čia mes nustatome sąlygą, kad jei fono spalva yra juoda, teksto spalva bus balta. Priešingu atveju, teksto spalva bus juoda, jei fonas baltas.
3. Papildomų sąlygų pridėjimas
Siekiant toliau plėtoti savo CSS taisykles, tu gali pridėti daugiau atvejų su else if. Tai leidžia tau patikrinti daugiau nei dvi spalvas.
Įsivaizduokime, kad norime papildomai reaguoti į raudoną ir žalią fono spalvą. Čia tu apibrėži else if sąlygas kiekvienai iš šių spalvų ir nurodai atitinkamą teksto spalvą kiekvienai.
4. Daugiau spalvų tikrinimas
Norint būti konkretesniam, galima patikrinti kelias specifines spalvas. Tu gali išplėsti savo sąlygas, kad skirtingos spalvos turėtų įtakos teksto vaizdavimui.
Čia tu patikrinai, ar fono spalva yra raudona, žalia, juoda ar balta. Priklausomai nuo grąžinamo rezultato, teksto spalva bus nustatyta atitinkamai. Visoms neapibrėžtoms spalvoms tu gali nurodyti numatytąją spalvą.
5. CSS savybių dinaminis keitimas
Dabar, kai tu pažįsti pagrindines sąlygas, gali dinamiškai keisti tikras CSS savybes. Tai ypač naudinga, kai nori išbandyti skirtingus išdėstymus.
Tegu bus taip, kad tu nori eksperimentuoti, ar išdėstymas turėtų būti pilno dydžio, ar ne. Šiuo atveju tu naudojasi dar viena if sąlyga, kad atitinkamai pritaikytum savybes, tokias kaip Margin ir Width.
6. Kintamųjų naudojimas lanksčiausiems išdėstymams
Tu taip pat gali apibrėžti kintamuosius, kad išbandytum įvairius išdėstymus, sukurdama Boolean kintamąjį, kurį tada naudosite savo sąlygose.
Pavyzdyje mes nustatome kintamąjį layoutTest, kuris, priklausomai nuo vertės, grąžina skirtingas išdėstymo savybes. Taip tu turi lankstumą keisti savo stilius skirtingomis sąlygomis, neparašydamas daug kartojančiojo kodo.
Apibendrinimas - Modernus CSS su Sass: efektyviai naudoti sąlygas su if ir else
Šiame mokyme tu sužinojai, kaip naudoti sąlygas Sass su if, else if ir else. Kurdamas kintamuosius ir apibrėždamas dinamiškus stilius, tu gali efektyviau kurti savo svetainę. Galimybė reaguoti į įvairius vertės būsenas atveria daugybę pritaikymo galimybių tavo CSS vystymui.
Dažnai užduodami klausimai
Kaip apibrėžiu kintamąjį Sass?Tu gali apibrėžti kintamąjį Sass su $ simboliu, pvz., $background-color: black;.
Ar galiu naudoti kelias sąlygas tuo pačiu metu?Taip, tu gali naudoti if, else if ir else, kad apibrėžtum kelias sąlygas.
Kaip galiu testuoti išdėstymus su sąlygomis?Naudodamas Sass tu gali lengvai nustatyti kintamuosius, kad dinamiškai keistum išdėstymo savybes, tokias kaip Padding ir Margin, priklausomai nuo sąlygos.
