Prasmīga mantošana CSS ar Sass

Ja, ja tu strādā ar CSS, tu pazīsti izaicinājumu, piemērot vienādas īpašības dažādiem selektoriem. Šeit nāk Sass, kas ar @extend funkciju ļauj šo uzdevumu padarīt ievērojami vieglāku un uzturējamāku. Šī rokasgrāmata sniedz tev detalizētu pārskatu par @extend darbību un to, kā tu to efektīvi vari izmantot savos projektos.

Svarīgākie secinājumi

• @extend funkcija ļauj CSS īpašības no viena selektora nodot citam.
• Tas padara CSS kodu tīrāku un vieglāk uzturamu.
• Ar @extend tu vari izvairīties no liekā koda un attīstīt modulārāku CSS uzstādījumu.

Solus-pa-solim rokasgrāmata

1. solis: Ievads mantošanā

Iedomājies, ka tev ir dažādas CSS klases, kurām nepieciešami līdzīgi stili. Pieņemsim, ka ir klase.alert, kas tiek izmantota brīdinājumu ziņojumiem, un klase.message, kā arī ID #warning. Tu vēlies tagad lietot to pašu stilu visiem šiem selektoriem. Tradicionālā CSS sintakse varētu izskatīties šādi:

Šeit tu nosaki color un padding īpašības tieši savos selektoros. Tas strādā, bet ātri kļūst neskaidrs, īpaši lielos projektos.

2. solis: Klasiskā CSS problēmas

Iedomājies, ka tavs CSS kods aug un ietver simtiem līdz tūkstošiem rindu. Ja tev vēlāk ir jāveic izmaiņas kādā no šīm klasēm, tas kļūst laikietilpīgi un kļūdaini, meklējot visā CSS kodā un veicot izmaiņas visiem skartajiem selektoriem.

Visizplatītākā pieeja ir pārrakstīt CSS īpašības, kas vēl vairāk uzpampina kodu un izraisa pieaugošu sarežģītību. Šajā brīdī @extend funkcija iegūst savu nozīmību.

3. solis: Ieviešot @extend funkciju

Ar @extend funkciju tu vari atrisināt iepriekš minēto problēmu, nododot īpašības no viena selektora uz citu. Tas nozīmē, ka tavs CSS paliek daudz kompakts un saprotams.

Iedomājies, ka tu strādā modulārā sistēmā, kur tu izveido dažādus moduļus, piemēram, izvēlnes un to īpašības. Šeit tu vienreiz definē pamata īpašības un tad nodod tās citiem moduļiem.

4. solis: @extend funkcijas pielietojums kodā

Sāksim ar tavu CSS koda rakstīšanu. Vispirms definē pamata īpašības selektoram.alert.

Sākot darīt to, tu vari izmantot @extend funkciju, lai izmantotu šīs īpašības citos selektoros.

Šeit tu izveido klasi.message un izmanto @extend funkciju, lai pārņemtu.alert īpašības. Tas notiek tik vienkārši kā:

.message { @extend.alert;
}

5. solis: Efektīvu izmaiņu veikšana

Tagad tev ir iespēja modificēt īpašības, nepārlasot visu kodu. Ja.message piemēram, vajag citu padding, tu vari to viegli pielāgot, neietekmējot citus selektorus.

Tas dod tev ne tikai vairāk kontroli pār CSS kodu, bet arī padara vieglāk veikt izmaiņas stilā.

6. solis: Pārbauda ģenerēto CSS kodu

Pēc @extend funkcijas ieviešanas ir jēga pārbaudīt ģenerēto CSS kodu. Tu vajadzētu pārliecināties, ka viss darbojas kā vēlams. To tu vari izdarīt, apskatoties Sass radīto CSS failu.

Tu redzēsi, ka @extend funkcija pareizi nodod īpašības un, kur vajadzīgs, veic pielāgojumus. Tas padara tavu kodu ievērojami uzturējamu un pārredzamāku.

7. solis: Modulāru CSS struktūru izveide

Viena svarīga @extend aspekts izpaužas arī modularitātes struktūru izveidē. Definē pamata īpašības, piemēram, fontus, krāsas un attālumus atsevišķā modulī. Tos tu vari tad nodot citiem selektoriem, piemēram, h1, p vai div.

Rezultāts ir ļoti slaids un labi strukturēts CSS kods. Tu redzēsi, cik daudz vieglāk ir strādāt ar šādiem modularitātes piegājieniem.

Kopsavilkums

@extend funkcijas pielietojums Sass ļauj tev efektīvi nodot CSS īpašības un padarīt tavu kodu tīrāku un uzturējamāku. Tu vari izvairīties no liekā koda un ļoti atvieglot savu projektu uzturēšanu, īpaši lielās un sarežģītās CSS struktūrās.