CSS ir neatņemama darba rīka katram tīmekļa izstrādātājam. Sass izmantošana paplašina CSS iespējas, ļaujot tev definēt nosacījumus, kas padara tavas tīmekļa vietnes dizainu dinamiskāku. Šajā rokasgrāmatā tu uzzināsi, kā strādāt ar if un else nosacījumiem Sass, lai elastīgi pielāgotu savus stilus un izveidotu atšķirīgus dizainus atbilstoši fona krāsai.
Svarīgākie atziņas Ar Sass tu vari efektīvāk reaģēt uz dažādām situācijām, izmantojot nosacījumus stilizācijas lapās. Mainīgo izveide un if, else if un else izmantošana ļauj dinamiskāk pielāgot CSS stilus, pamatojoties uz specifiskiem nosacījumiem.
Solī pa solim rokasgrāmata
1. Fona krāsas iestatīšana
Uzsāksim ar to, ka definēsim tīmekļa vietnes fona krāsu. Tu vari izveidot mainīgo fona krāsai, kas vēlāk tiks izmantota, lai dinamiskā veidā pielāgotu teksta krāsu. Vispirms definē mainīgo.
Šajā piemērā mēs izveidojam mainīgo fona krāsai. Ja, piemēram, fona krāsa ir melna, tad teksta krāsai un fontam jābūt iestatītam uz kontrastējošu krāsu, lai tas būtu labi saskatāms.
2. Reakcija uz nosacījumiem
Tagad mēs nonākam pie nosacījumu piemērošanas. Tu vari izmantot if nosacījumus, lai noteiktu, kura fona krāsa tiek izmantota, un attiecīgi mainītu teksta krāsu.
Šeit mēs uzstādam nosacījumu, ka, ja fona krāsa ir melna, tad teksta krāsa tiks iestatīta uz baltu. Pretējā gadījumā teksta krāsa būs melna, ja fons ir balts.
3. Papildu nosacījumu pievienošana
Lai paplašinātu savus CSS noteikumus, tu vari pievienot papildu gadījumus ar else if. Tas ļauj veikt vairāk nekā divu krāsu pārbaudi.
Pieņemsim, ka mēs vēlamies reaģēt uz sarkano un zaļo fona krāsu. Šeit tu definē else if nosacījumus katrai no šīm krāsām un norādi attiecīgu teksta krāsu katrai no tām.
4. Dažādu krāsu pārbaude
Lai būtu specifiskāks, ir iespējams pārbaudīt vairākas specifiskas krāsas. Tu vari paplašināt savus nosacījumus, lai dažādas krāsas ietekmētu teksta attēlošanu.
Šeit tu pārbaudi, vai fona krāsa ir sarkana, zaļa, melna vai balta. Atkarībā no atgriezes vērtības teksta krāsa tiks iestatīta attiecīgi. Visām nedefinētajām krāsām tu vari norādīt noklusējuma krāsu.
5. CSS īpašību dinamiska pielāgošana
Tagad, kad tu zini pamata nosacījumus, tu vari dinamiski mainīt faktiskās CSS īpašības. Tas ir īpaši noderīgi, ja tu vēlies izmēģināt dažādus izkārtojumus.
Pieņemsim, ka tu gribi eksperimentēt, vai izkārtojums būtu pilna lapas platuma vai nē. Šajā gadījumā tu izmanto vēl vienu if izteiksmi, lai attiecīgi pielāgotu īpašības, piemēram, margin un width.
6. Mainīgo izmantošana elastīgiem izkārtojumiem
Tu vari arī definēt mainīgos, lai testētu dažādus izkārtojumus, definējot Boolean mainīgo, kuru tu izmantosi savos nosacījumos.
Šajā piemērā mēs iestatām mainīgo layoutTest, kas – atkarībā no vērtības – atgriež atšķirīgas izkārtojuma īpašības. Tādējādi tu iegūsti elastību mainīt savus stilus dažādos nosacījumos, nerakstot daudz atkārtojoša koda.
Secinājumi - Moderns CSS ar Sass: Efektīva if un else nosacījumu izmantošana
Šajā apmācībā tu esi uzzinājis, kā izmantot nosacījumus Sass ar if, else if un else palīdzību. Izveidojot mainīgos un definējot dinamiskos stilus, tu vari efektīvāk veidot savu tīmekļa vietni. Iespēja reaģēt uz dažādiem vērtību stāvokļiem tev paver daudzpusīgas iespējas tavā CSS izstrādē.
Biežāk uzdotie jautājumi
Kā es varu definēt mainīgo Sass?Tu vari definēt mainīgo Sass ar $ simbolu, piemēram, $background-color: black;.
Vai es varu vienlaicīgi izmantot vairākus nosacījumus? Jā, tu vari izmantot if, else if un else, lai definētu vairākus nosacījumus.
Kā es varu testēt izkārtojumus ar nosacījumiem?Ar Sass tu vari viegli iestatīt mainīgos, lai dinamiskā veidā mainītu izkārtojuma īpašības, piemēram, padding un margin atbilstoši nosacījumam.
