Sass piedāvā aizraujošu iespēju CSS padarīt dinamiskāku. Ar dažādiem matemātiskiem operatoriem tu vari ne tikai aprēķināt vērtības, bet arī turpināt optimizēt lietotāja pieredzi. Šī rokasgrāmata tev ne tikai parādīs, kā definēt specifiskas vērtības, bet arī to, kā, izmantojot aprēķinus, izveidot elastīgu tīkla sistēmu.
Galvenās atziņas
- Sass satur dažādus matemātiskos operatorus: saskaitīšana, atņemšana, reizināšana un dalīšana.
- Aprēķini ļauj tev izveidot dinamiskus izkārtojumus, kas ir vieglāk pielāgojami.
- Darbs ar mainīgajiem Sass uzlabo tavu koda uzturējamību un elastību.
Solim pa solim rokasgrāmata
Lai efektīvi strādātu ar Sass un pilnībā izmantotu tā matemātiskās funkcijas, es tev soli pa solim parādīšu, kā tas darbojas.
Pirmkārt, tev ir jāizmanto vienkārša mainīgo deklarācija savā Sass projektā. Tas palīdz tev centrāli definēt fontu izmērus vai citus svarīgus parametrus un izmantot tos vairākās vietās.
Pieņemsim, ka vēlies definēt galveno virsrakstu (H1) un otro virsrakstu (H2). Tu vari aprēķināt ar Sass, definējot, piemēram, H2 fonta izmēru.
Šeit H2 fonta izmērs tiek aprēķināts kā 20 pikseļi, reizinot bāzes izmēru ar 2. Tas parāda mainīgo un aprēķinu izmantošanas ieguvumus Sass.
Vēl viens veids, kā efektīvi izmantot Sass, ir atņemšanas izmantošana.
Esiet uzmanīgi, lai aprēķinos nesajauktu dažādas mērvienības, piemēram, pikseļus un procentus, jo tas var radīt kļūdas.
Ievērojams piemērs ir reizināšana.
Šeit galvenā konteinera platums tiek iestatīts uz 60 % no kopējā platuma.
Ja tu strādā ar tīkla sistēmu, varbūt vēlēsies arī dinamiski aprēķināt elementu platumu un augstumu.
Tādējādi tu vari pārvērst pikseļus procentos, kas ļauj tev elastīgi pielāgot savu izkārtojumu.
Klasei right tu varētu līdzīgi aprēķināt platumu 300 pikseļiem. Tas nodrošina, ka abi elementi darbotos atbilstoši responsīvā izkārtojumā, bez nepieciešamības manuāli pielāgot procentus.
Viena no labākajām praktikām, ko tu vari pieņemt, ir centrāli izmantot mainīgos. Kad esi izveidojis struktūru saviem virsrakstiem, tu vari tos lietot konsekventi visā projektā.
Ja vēlies vēlāk pielāgot kaut ko, tev tikai jāmaina vērtības centrālajā vietā.
Šī elastība ir īpaši noderīga, ja tu strādā ar dizainiem, kas nāk no rīka kā Photoshop, un tu vēlies pārvērst pikseļu vērtības CSS.
Visbeidzot, tev vajadzētu izmantot milzīgas matemātisko aprēķinu priekšrocības Sass, īpaši strādājot ar izkārtojumiem un responsīviem dizainiem. Pateicoties mainīgajiem un aprēķiniem Sass, tu vari veikt ātras izmaiņas, nesatraucoties par kopainu.
Kopsavilkums – Mūsdienu CSS ar Sass: Matemātiskie operatori sīkāk
Šajā rokasgrāmatā tu esi uzzinājis, kā izmantot matemātiskos operatorus Sass, lai optimizētu savus CSS definējumus. Tu esi izcēlis mainīgo nozīmi un redzējis, kā tos izmantot, lai definētu dinamiskus izkārtojumus, kas ir viegli pielāgojami.
Bieži uzdotie jautājumi
Cik matemātisko operatoru ir Sass?Sass ir četri pamata matemātiskie operatori: saskaitīšana, atņemšana, reizināšana un dalīšana.
Kāpēc man jāizmanto mainīgie Sass?Mainīgie ļauj vieglāk uzturēt un pielāgot CSS vērtības, jo tās tiek centrāli deklarētas.
Kā es varu pārvērst pikseļus procentos?Tu vari aprēķināt procentus, dalot pikseļu izmēru ar kopējo platumu un pēc tam reizinot ar 100.
