Sass siūlo įdomų būdą CSS padaryti dinamiškesniu. Naudodamas įvairius matematikos operatorius, gali ne tik apskaičiuoti reikšmes, bet ir toliau optimizuoti vartotojo patirtį. Šis vadovas ne tik parodys, kaip apibrėžti specifines reikšmes, bet ir kaip naudodamas skaičiavimus kurti lankstų tinklo sistemą.
Svarbiausi įžvalgos
- Sass turi įvairių matematikos operatorių: sudėtis, atimtis, daugyba ir dalyba.
- Skaičiavimai leidžia tau kurti dinamiškus išdėstymus, kurie lengviau pritaikomi.
- Darbas su kintamaisiais Sass pagerina tavo kodo priežiūrą ir lankstumą.
Žingsnis po žingsnio vadovas
Norint efektyviai dirbti su Sass ir pilnai išnaudoti jo matematikos funkcijas, aš parodysiu tau žingsnis po žingsnio, kaip tai veikia.
Pirmiausia turi savo Sass projekte naudoti paprastą kintamojo deklaraciją. Tai padės tau centriniu būdu apibrėžti šrifto dydžius ar kitas svarbias matmenų reikšmes ir naudoti jas keliose vietose.
Tarkime, tu nori apibrėžti pagrindinį antraštę (H1) ir antrą antraštę (H2). Tu gali skaičiuoti su Sass, pavyzdžiui, taip apibrėždamas H2 šrifto dydį.
Čia H2 šrifto dydis apskaičiuojamas kaip 20 pikselių, padauginus bazinį dydį iš 2. Tai parodo, kokią naudą turi kintamieji ir skaičiavimai Sass.
Dar vienas būdas efektyviai naudoti Sass yra atimties naudojimas.
Būk atsargus, kad nenaudotum skirtingų matavimo vienetų, tokių kaip pikseliai ir procentai, nes tai gali sukelti klaidų.
Įspūdingas naudojimo atvejis yra daugyba.
Čia pagrindinio konteinerio plotis nustatomas 60 % bendro pločio.
Dirbant su tinklo sistema, galbūt norėsi dinamiškai apskaičiuoti elementų plotį ir aukštį.
Tokiu būdu gali konvertuoti pikselius į procentus, kas tau suteikia lanksčių galimybių pritaikyti savo išdėstymą.
Kai kuriai klasei dešinėje tu galėtum skaičiuoti plotį, panašiai nustatydamas 300 pikselių. Tai užtikrina, kad abu elementai reaguojančiame išdėstyme veiktų tinkamai, nereikalaujant rankiniu būdu koreguoti procentinių reikšmių.
Viena iš geriausių praktikų, kurias turėtum pasimokyti, yra centriniu būdu naudoti kintamuosius. Kai sukursi struktūrą savo antraštėms, galėsi jas nuosekliai naudoti visame projekte.
Jei vėliau norėsi koreguoti, kaip dažnai, turėsi tik reikšmes pakeisti viename centriniame taške.
Šis lankstumas yra ypač naudingas, kai dirbi su dizainais, kurie kilo iš tokio įrankio kaip Photoshop, ir nori pikselių reikšmes paversti į CSS.
Pabaigai, turėtum pasinaudoti didžiulėmis matematikos skaičiavimų privalumais Sass, ypač dirbdamas su išdėstymais ir reaguojančiais dizainais. Dėl kintamųjų ir skaičiavimų Sass gali greitai atlikti pakeitimus, nesukant galvos apie visumą.
Apibendrinimas – Modernus CSS su Sass: Matematiniai operatoriai detaliau
Šiame vadove sužinojai, kaip naudoti matematikos operatorius Sass, kad optimizuotum savo CSS apibrėžimus. Tu pabrėžei kintamųjų svarbą ir pamatėme, kaip juos naudoti kuriant dinamiškus išdėstymus, kurie lengvai pritaikomi.
Dažnai užduodami klausimai
Kiek matematikos operatorių turi Sass?Sass turi keturis pagrindinius matematikos operatorius: sudėtį, atimtį, daugybą ir dalybą.
Kodėl turėčiau naudoti kintamuosius Sass?Kintamieji leidžia lengviau prižiūrėti ir pritaikyti CSS reikšmes, nes jie degraduojami centriniu būdu.
Kaip galiu pikselius paversti procentais?Tu gali apskaičiuoti procentines reikšmes, padalindamas pikselių dydį iš bendro pločio ir vėliau padaugindamas iš 100.
