Sass pakub põnevat võimalust CSS-i dünaamilisemaks muutmiseks. Erinevate matemaatiliste operaatorite abil saad sa mitte ainult väärtusi arvutada, vaid ka oma kasutajakogemust veelgi parandada. See juhend näitab sulle mitte ainult, kuidas sa konkreetseid väärtusi defineerid, vaid ka, kuidas arvutuste abil paindlikku grid-süsteemi luua.
Olulisemad järeldused
- Sass sisaldab erinevaid matemaatilisi operaatorite: liitmine, lahutamine, korrutamine ja jagamine.
- Arvutused võimaldavad sul luua dünaamilisi paigutusi, mis on lihtsamalt kohandatavad.
- Muuttujate kasutamine Sassis parandab sinu koodi hooldatavust ja paindlikkust.
Juhend samm-sammult
Et Sassiga tõhusalt töötada ja selle matemaatilisi funktsioone täielikult ära kasutada, näitan sulle allpool samm-sammult, kuidas see toimib.
Esimene asi, mida pead tegema, on oma Sass- projektis kasutada lihtsat muutuja deklaratsiooni. See aitab sul keskelt määratleda fondi suurusi või muid olulisi mõõtmeid ja neid mitmel kohal kasutada.
Oletame, et soovid määratleda pealkirja (H1) ja teise pealkirja (H2). Sa saad Sassis arvutada, määratledes näiteks H2 fondi suuruse nii.
Siin arvutatakse H2 fondi suurus 20 pikslina, korrutades baassuuruse 2-ga. See illustreerib muutuja ja arvutuste kasu Sassis.
Veel üks võimalus, kuidas Sassit tõhusalt kasutada, on lahutamine.
Ole ettevaatlik, et sa arvutuste tegemisel erinevaid mõõtühikuid nagu pikslid ja protsendid ei kombineeriks, kuna see võib viia vigadeni.
Imetlusväärne kasutusjuht on korrutamine.
Siin seatakse põhikonteineri laius 60% kogu laiusest.
Kui töötad grid-süsteemiga, soovid võib-olla ka elementide laius ja kõrgus dünaamiliselt arvutada.
Nii saad pikslid protsentideks ümber arvutada, mis võimaldab sul oma paigutust paindlikult kohandada.
Klassi right puhul saaksid sa sarnasel viisil arvestada laiust 300 pikslit. See tagab, et mõlemad elemendid töötavad respondiivses paigutuses korralikult, ilma et sul oleks vaja käsitsi protsentide väärtusi kohandada.
Üks parimaid praktikaid, mida sa peaksid omaks võtma, on muutuja keskne kasutamine. Kui oled oma pealkirjade struktuuri loonud, saad neid kasutada kõikjal projektis ühtlaselt.
Kui soovid hiljem muuta, kui sageli pead, pead muutma vaid väärtuseid ühes keskse kohas.
See paindlikkus on eriti kasulik, kui töötad disainidega, mis pärinevad sellisest tööriistast nagu Photoshop ja soovid piksliväärtuseid oma CSS-i teisendada.
Lõpuks, peaksid sa kasutama matemaatiliste arvutuste suuri eeliseid Sassis, eriti töötades paigutuste ja respondiivsete kujundustega. Tthanks muutuja ja arvutuste Sassis saad kiiresti muudatusi teha, ilma et peaksid muretsenema suure pildi pärast.
Kokkuvõte – Kaasaegne CSS Sassiga: Matemaatilised operaatorid üksikasjalikult
Sel juhendil õppisid, kuidas kasutada matemaatilisi operaatorite Sassis, et optimeerida oma CSS-i määratlusi. Sa tõid välja muutuja tähtsuse ning nägid, kuidas neid kasutada dünaamiliste paigutuste määratlemiseks, mis on kergesti kohandatavad.
Korduma kippuvad küsimused
Kui palju matemaatilisi operaatorite on Sassis?Sassil on neli põhimatemaatilist operaatorit: liitmine, lahutamine, korrutamine ja jagamine.
Miks peaksin kasutama muutujaid Sassis?Muutujad võimaldavad lihtsamat hooldust ja kohandamist CSS-i väärtustes, kuna need kuuluvad keskse deklareerimise alla.
Kuidas saan pikslid protsentideks ümber arvutada?Sa saad protsendiväärtusi arvutada, jagades pikslite suuruse kogu laiusega ja seejärel korrutades 100-ga.
