Maison > Article > interface Web > Que sont les variables CSS ? En savoir plus sur les variables CSS : héritage et portée des variables CSS

Que sont les variables CSS ? En savoir plus sur les variables CSS : héritage et portée des variables CSS

php是最好的语言original: 2018-07-30 14:30:011936parcourir

Ce que les variables CSS peuvent nous aider à faire

Dans certains langages de programmation impératifs, comme Java, C++ ou JavaScript, nous pouvons suivre certains états grâce à des variables. Une variable est un symbole associé à une valeur spécifique et la valeur de la variable peut changer avec le temps.
Dans un langage déclaratif comme CSS, les valeurs qui changent dans le temps n'existent pas, et il n'y a pas de notion de variables.
CSS introduit le concept de variables hiérarchiques pour répondre aux défis de maintenabilité. Cela permettra à une variable d'être référencée symboliquement dans l'ensemble de l'arborescence CSS

1. Qu'est-ce qu'une variable CSS

Les variables CSS ont actuellement deux formes :

variable, c'est-à-dire , ayant des identifiants légaux et des valeurs légales. Peut être utilisé n'importe où. Les variables peuvent être utilisées à l'aide de la fonction var(). Par exemple : var(--example-variable) renverra la valeur correspondant à l'attribut personnalisé --example-variable
. Ces propriétés utilisent le format spécial --where comme noms. Par exemple --example-variable: 20px; même une déclaration CSS. Cela signifie attribuer 20px à la variable --example-varibale

2. Déclaration des variables

Nommage des variables

La déclaration des variables utilise deux lignes de conjonction - pour représenter les variables, $ color est une syntaxe qui appartient à Sass, et @color est une syntaxe qui appartient à Less. Pour éviter les conflits avec les variables natives CSS, utilisez --)

Remarque : les noms de variables sont sensibles à la casse, --header-color. et --Header-Color sont deux variables différentes

méthodes de déclaration

La façon de déclarer les variables CSS est très simple Comme suit, une variable CSS nommée color est déclarée.

Écrivez dans le fichier CSS
Écrivez dans le style en ligne de la balise html
Utilisez JS pour déclarer un élément à l'aide de la méthode .style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)

Type de valeur de variable

Si la valeur de la variable est une chaîne, elle peut être combiné avec d'autres caractères Concaténation de chaînes

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}

Si la valeur de la variable est une valeur numérique, elle ne peut pas être utilisée directement avec l'unité numérique. Vous devez utiliser la fonction calc() pour les connecter

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

Si la valeur de la variable a une unité, elle ne peut pas être écrite sous forme de chaîne

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

Remarque : les valeurs de variable ne peuvent être utilisées que comme valeurs d'attribut, pas comme noms d'attribut

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

Dans le code ci-dessus, la variable --side est utilisée comme nom d'attribut, elle n'est pas valide

3 Héritage et portée des variables CSS

Les propriétés personnalisées prennent également en charge l'héritage. S'il n'y a pas d'attribut personnalisé défini sur un élément, la valeur de l'attribut personnalisé sera héritée de son élément parent

class="one">
  <p class="two">
    <p class="three">
    </p>
    <p class="four">
    </p>
  <p>
</p>

Définissez le CSS suivant :

.two { --test: 10px; }
.three { --test: 2em; }

Dans celui-ci. exemple, var( --test) Le résultat est :

class="two" nœud correspondant : 10px
class="trois" nœud correspondant : élément : 2em
class="four" nœud correspondant : 10px (hérité de son parent)
class="one" Nœud correspondant : valeur invalide, c'est-à-dire que cette valeur d'attribut est la valeur par défaut qui n'a pas été remplacée par des variables CSS personnalisées

La portée de niveau supérieur est : racine

4. Formule de réponse

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

5. Différences par rapport au préprocesseur

1. Les variables du préprocesseur ne sont pas en temps réel

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

Résultat de la compilation

.mediabox {
  background: #7F583F; 
}

2. Le préprocesseur ne peut pas limiter la portée

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

est compilé en

ul {
  color: blue; 
}

3 Les variables du préprocesseur ne sont pas interopérables

Native CSS Custom. Les propriétés peuvent être utilisées avec n'importe quel préprocesseur CSS ou fichier CSS pur

6 variables de manipulation JS

Les variables CSS peuvent interagir avec JS

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;

7, compatibilité

.

Méthode pour détecter si le navigateur prend en charge les attributs personnalisés CSS

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}

Résumé

Par rapport aux variables de préprocesseur traditionnelles telles que LESS et SASS, les avantages des variables CSS sont :

Les variables CSS sont dynamiques et peuvent être modifiées pendant l'exécution de la page, tandis que les variables du préprocesseur traditionnelles ne peuvent pas être modifiées après la compilation
Les variables CSS peuvent être héritées, utilisés en combinaison et ont une portée
Utilisés avec Javascript, ils peuvent être facilement lus/écrits à partir de JS

Articles Liés

Voir plus