Sass ir spēcīgs CSS paplašinājums, kas ne tikai atvieglo stila lapu rakstīšanu, bet arī ievērojami uzlabo tavu stilu uzturēšanu un struktūru. Viens no noderīgākajiem Sass funkcijām ir Mixins, ar kuru palīdzību tu vari definēt un centrāli pārvaldīt atkārtotus koda fragmentus. Šis rokasgrāmata parāda, kā tu vari izveidot savus Mixins, kas var būtiski atvieglot tavu darba plūsmu.
Galvenās atziņas
- Mixins ļauj atkārtoti izmantot CSS kodu un ietaupa laiku.
- Tu vari izmantot mainīgus un noklusējuma vērtības Mixins.
- Izmaiņas Mixins ietekmē visas izmantošanas projektā.
Solim pa solim rokasgrāmata
1. solis: Izveidot Mixin failu
Vispirms tu vajadzētu izveidot īpašu failu saviem Mixins. Tas nodrošina labāku struktūru un pārskatāmību. Izveido failu ar nosaukumu mixins.scss un atver to savā redaktora programmā.
2. solis: Definēt Mixin
Tagad sāk savu pirmo Mixin definēšanu. Šeit ir vienkāršs piemērs: Mixin vienotai teksta izmēram.
Šajā gadījumā tu nosaki sava Mixin nosaukumu un definē kodu, kas tiks atkārtoti izmantots.
3. solis: Izmantot Mixin izkārtojuma failā
Lai izmanto Mixin, pārej uz savu izkārtojuma failu. Tur tu vari to vienkārši pievienot, rakstot šādi:
Saglabā savas izmaiņas un atver app.css, lai redzētu, ka teksta izmērs tiek konsekventi izmantots visā projektā.
4. solis: Paplašināt Mixin ar argumentiem
Mixins var pieņemt arī argumentus, lai nodrošinātu lielāku elastību.
5. solis: Lietot Mixin
Ja tu vēlies veikt izmaiņas teksta izmērā vai krāsā, tu to vari viegli izdarīt Mixin.
6. solis: Definēt noklusējuma vērtības
Vēl viena noderīga funkcija ir noklusējuma vērtību definēšana. Tas nodrošina lielāku pārskatāmību.
Izveido standartus, kurus var pārrakstīt, ja nepieciešams.
7. solis: Lietot Mixin bez vērtībām
Tagad h1 izmanto noklusējuma vērtību, kamēr h2 piemēro specifiskās vērtības.
8. solis: Optimizēt Mixins izmantošanu
Eksperimentē ar dažādām īpašībām un attīsti sevi, lai definētu Mixins, kas tev palīdz dažādās situācijās. Tas var ietvert Mixins tādām lietām kā border-radius vai flexbox izkārtojumi.
Kopsavilkums - Mixins Sass: kā tos definēt un izmantot
Mixins piedāvā tev vienkāršu veidu, kā organizēt un vienkāršot savu CSS kodu. Centrāla pārvaldība un iespēja izmantot argumentus un noklusējuma vērtības nodrošina, ka tavs kods ir uzturams un efektīvs. Lietojot šīs tehnikas, tavs darba plūsma kļūs ilgtspējīgāka un produktīvāka.
Bieži uzdotie jautājumi
Kā es definēju Mixin Sass?Mixin tiek definēts ar @mixin, kam seko nosaukums un vēlamās CSS instrukcijas.
Kā es lietoju Mixin?Izmanto @include, kam seko Mixina nosaukums, lai to izmantotu savā CSS failā.
Vai es varu nodot argumentus Mixins?Jā, tu vari, definējot Mixin, noteikt parametrus un tos nodot, piemērojot Mixins.
Kā es nosaku noklusējuma vērtības Mixins?NOSRALIS VVALUES DEFINĪJI KĀ $parameter: defaultValue, un atstāj tos tukšus, ja vēlies izmantot noklusējuma vērtības.
Vai Mixins ir pieejami tikai Sass?Jā, Mixins ir specifiski Sass un nepiedāvā atbalstu tīrā CSS.
