March 8, 2026
Patarimai

Kuo skiriasi CSS kintamieji nuo pirminio procesoriaus kintamųjų?

tomas

Kintamieji yra viena iš pagrindinių priežasčių, kodėl apskritai egzistuoja CSS išankstiniai procesoriai. Galimybė nustatyti kintamąjį panašiam į spalvą, naudoti tą kintamąjį visoje CSS, kurį rašote, ir žinoti, kad jis bus nuoseklus, SAUSAS ir lengvai keičiamas. Dėl tų pačių priežasčių galite naudoti vietinius CSS kintamuosius („CSS tinkintos ypatybės“). Tačiau taip pat turėtų būti keletas svarbių skirtumų.

Paprastas išankstinio procesoriaus kintamojo naudojimo pavyzdys yra toks:

$brandColor: #F06D06;

.main-header {
  color: $brandColor;
}
.main-footer {
  background-color: $brandColor;
}

Tai buvo „Sass“ SCSS variantas, tačiau visi CSS išankstiniai procesoriai siūlo kintamųjų sąvoką: „Stylus“, „Less“, „PostCSS“ ir kt.

Aukščiau pateiktas kodas nieko nepadarys naršyklėje. Naršyklė nesupras deklaracijų ir jas išmes. Išankstiniai procesoriai turi sudaryti CSS, kad būtų naudojami. Šis kodas sudaromas:

.main-header {
  color: #F06D06;
}
.main-footer {
  background-color: #F06D06;
}

Tai dabar galiojanti CSS. Kintamasis buvo pirminio procesoriaus kalbos dalis, o ne pati CSS. Sukūrus kodą, kintamieji nebeliks.

Visai neseniai gimtoji CSS pradėjo palaikyti CSS kintamuosius arba „CSS pasirinktines ypatybes“. Tai leidžia jums dirbti su kintamaisiais tiesiogiai CSS. Nėra kompiliavimo.

Paprastas CSS pritaikytos nuosavybės naudojimo pavyzdys yra toks:

:root {
  --main-color: #F06D06;
}

.main-header {
  color: var(--main-color);
}
.main-footer {
  background-color: var(--main-color);
}

Šios dvi demonstracinės versijos pasiekia tą patį dalyką. Mes sugebėjome vieną kartą apibrėžti spalvą ir naudoti ją du kartus.

Taigi tada … kam naudoti vieną kitą?

Kodėl turėtumėte naudoti savąsias CSS pasirinktines ypatybes?

  • Galite juos naudoti nereikia išankstinio procesoriaus.
  • Jie kaskados. Bet kuriame selektoriuje galite nustatyti kintamąjį, kad nustatytumėte ar nepaisytumėte jo dabartinės vertės.
  • Kai pasikeičia jų vertės (pvz., Medijos užklausa ar kita būsena), naršyklė prireikus perdažo iš naujo.
  • Galite pasiekti ir manipuliuoti jais „JavaScript“.

Kalbant apie kaskadą, pateikiame paprastą to pavyzdį:

:root {
  --color: red;
}
body {
  --color: orange;
}
h2 {
  color: var(--color);
}

Bet koks <h2> bus oranžinė, nes bet kuri <h2> bus vaikas <body>, kuris turi aukštesnį taikomą specifiškumą.

Jūs netgi galite iš naujo nustatyti kintamuosius medijos užklausose ir tas naujas reikšmes kaskaduoti visur naudodamiesi jomis, o tai tiesiog neįmanoma naudojant išankstinio procesoriaus kintamuosius.

Peržiūrėkite šį pavyzdį, kai medijos užklausa keičia kintamuosius, kurie naudojami labai paprastam tinkleliui nustatyti:

Robas Dodsonas pasisako už CSS pritaikytas ypatybes CSS kintamuosiuose: kodėl jums tai turėtų rūpėti?

Kintamieji, kurie [preprocessors] naudojimas turi didelį trūkumą, t. y. kad jie yra statiški ir jų negalima keisti vykdymo metu. Pridėjus galimybę keisti kintamuosius vykdymo metu, ne tik atsiveria durys į tokius dalykus, kaip dinaminė programų tematika, bet ir svarbūs reaguojamojo dizaino aspektai ir galimybė ateityje užpildyti būsimas CSS funkcijas.

Jis įtraukia demonstracinę versiją, kurioje „JavaScript“ keičia stilius. Tai tiesiogiai nekeičia elementų stilių, o tiesiog atstato kai kuriuos CSS kintamuosius:

Wesas Bosas taip pat demonstruoja tai:

Žr. „Wes Bos“ (@wesbos) „CodePen“ „Pen Update CSS“ kintamuosius su JS.

Atkreipkite dėmesį, kad yra daugybė dalykų apie CSS pasirinktines ypatybes, kurias čia palieku. Galite nustatyti atsargas. Su jais galite naudoti „calc“ (). Yra daugybė šaunių triukų, kuriuos galite padaryti su jais. Žiūrėkite namų skyrių žemiau!

Kodėl verta naudoti išankstinio procesoriaus kintamuosius?

  • Didysis: nėra paveldėjimo naršyklės palaikymo priežasčių. Jie kaupiasi į įprastą CSS.
  • Mažas dalykas: kaip jūs galite nuimti vienetus nuo vertės, jei jums to prireiktų.

Galėtumėte juos naudoti kartu

Yra gana įtikinamų priežasčių naudoti abu. Jūs tikrai galite turėti CSS išankstinio procesoriaus išvesties CSS pasirinktines ypatybes. Ivanas Ivanovas sukūrė demonstracinę versiją, leidžiančią rašyti naudojant CSS pasirinktinių ypatybių sintaksę ir per „Sass“ išvesties kodą, kuris turi trūkumų:

„CodePen“ šiuo metu žr. $ I.van (ov) (@ vank0) „Pen Use CSS4“ kintamuosius.

Aš linkęs manyti, kad kai tik galėsime naudoti pasirinktines CSS ypatybes, nesijaudindami dėl naršyklės palaikymo, tiesiog jas naudosime atlikdami visus kintamuosius. Mes vis tiek galime naudoti išankstinius procesorius kitiems patogumams, tačiau kintamasis valdymas savojoje CSS atrodo toks geras, kad, ko gero, verta tik tuo užsiimti.

„CSS Custom Properties“ palaikymas naršyklėje

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
49 31 Ne 16 10

Mobilusis / planšetinis kompiuteris

„Android“ „Chrome“ „Android Firefox“ „Android“ „iOS Safari“
91 89 91 10.0-10.2

Namų darbų laikas: aukštyn!

1) Žiūrėkite Lea Verou CSS kintamieji: var (–subtitle);

Ji aprėpia daugybę praktinių pritaikymų, taip pat keletą gudrybių, tokių kaip kontrolė, kai kintamieji pakyla, ir kai kurie „getchas“.

2) Žiūrėkite Davidą Khourshidą Reaktyviosios animacijos naudojant CSS

Davidas dalijasi mintimi, kad DOM įvykių sujungimas su CSS kintamaisiais gali padaryti tikrai nuostabų vartotojo sąsają, neturint daug kodo. Peržiūrėkite jo skaidres (pradedant nuo Nr. 26), kurios rodo, kaip tai nuostabu.

3) Perskaitykite Harry Roberts Pragmatiškas, praktiškas ir progresyvus dalykas su pritaikytomis savybėmis

Jo straipsnyje paaiškinta, kaip svetainių temų sudarymas naudojant CSS kintamuosius daug lengviau.

4) Perskaitykite Romano Komarovo knygą CSS kintamųjų sąlygos

Nepaisant to, kad apie tai kalbama taip dažnai, CSS nėra logiškų vartų (pvz., @if (true) { }). Mes kartais suklastojame tokius dalykus kaip: patikrinta, bet tai priklauso nuo DOM. Romanas parodo triuką, kuriame galite pasinaudoti 0 arba 1 kintamajame ir tada naudokite jį su calc() imituoti loginę logiką.

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Previous post Ką daro geriausios švietimo sistemos |
Next post Kas yra „Mažųjų namų“ judėjimas? Kodėl maži namai?

More Stories

Recent Post

Top Category

Lietuva

Apie viską

Lietuviški

Mityba