Interacțiunea dintre javascript și css cu variabile css

Ce sunt variabilele CSS?

Variabilele CSS (a se vedea specificația) adaugă două noi concepte CSS. De acum înainte, puteți defini propriile proprietăți începând cu o cratimă dublă (-):







Și apoi folosiți-le cu var ():

Pentru toți cei care sunt familiarizați cu SASS sau cu un limbaj similar compilat în CSS, avantajele acestui lucru sunt evidente, puteți schimba cu ușurință culorile, dimensiunile etc. într-un singur loc.

Interesant, variabilele respectă aceleași reguli de moștenire ca și alte proprietăți CSS. De exemplu, dintr-o dată am decis să experimentăm culoarea principală a blogului nostru:

Toate legăturile din interiorul acelei părți a paginii care se referă la intrarea pe blog vor fi o tentă maro.

Variabilele CSS sunt pur și simplu perfect combinate cu expresia calc ():

Nu este neobișnuit să abandonezi în totalitate un singur CSS și să scrii doar stiluri în JS:







Variabilele CSS vă permit să faceți mult mai bine, luați același exemplu:

Dacă încercați, puteți face fără concatenare:

Puteți defini chiar și o valoare implicită CSS, care este redefinită de script:

Iată un exemplu gata făcut, cu care puteți juca:

P.S. Și asta poate fi interesant:

Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.

Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT

De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...







Articole similare

Trimiteți-le prietenilor: