Variabilele CSS

Limbaje de Programare HTML & CSS
, ,
1

Am descoperit (i.e. am început să folosesc activ) variabilele CSS ieri și sunt foarte încântat de cum funcționează.

Ce îmi place cel mai mult este modul în care funcționează în combinație cu media query:

:root {
  --font_size_xxl: 40px;
  --font_size_xl: 30px;
}

@media all  and (min-width: 800px) {
  :root {
    --font_size_xxl: 64px;
    --font_size_xl: 40px;
  }
}

div {
  font-size: var(--font_size_xxl);
}

p {
  font-size: var(--font_size_xl);
}

h3 {
  font-size: var(--font_size_xxl);
}

Și cam atât. Nu mai e nevoie să adaugi un media query pentru fiecare element, se ajustează variabilele corespunzător.

IE/Edge nu au suport (prea bun) pentru asta, dar folosesc plugin-ul ăsta pentru postcss și la o primă vedere merge excelent.

2016-12-13__19_15.jpg1391×629 68 KB

5 Likes
2

Inseamna ca le cam pica guvernul lui SASS si LESS ? :slight_smile:

3

Sass permite o structurare a proiectului ce nu este posibilă cu CSS chior. Și mai sunt și mixin-urile la mijloc. Aș zice că preprocesoarele vor mai fi în zonă câțiva ani buni :slight_smile:

3 Likes
4

De ceva timp le folosesc si eu. Am fost intotdeauna impotriva preprocesatoarelor CSS, si ma bucur ca cei care se ocupa de standardele CSS extind functionalitatile de baza ale acestuia pentru a reduce necesitatea unor astfel de unelte (care de foarte multe ori fac mai mult rau decat bine).

Am folosit si functiile de modificare a culorilor (vezi https://drafts.csswg.org/css-color/#modifying-colors) impreuna cu https://github.com/postcss/postcss-color-function (nu exista inca suport in browsere), insa din cauza unor complicatii (avand in vedere ca vreau sa pastrez variabilele in sursa pentru browserele care le suporta, functiile de culoare care contineau variabile erau considerate valide de catre browser - testat Chrome / FF - desi acesta nu le suporta, rezultatul fiind eronat - lipsa culorii), am renuntat in favoarea folosirii hsl/a (nu e deloc acelasi lucru, insa se pot urmari / crea foarte usor nuante prin saturatie si luminozitate).

2 Likes