Maison > interface Web > tutoriel CSS > le corps du texte

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

php是最好的语言
Libérer: 2018-07-30 14:30:01
original
1958 Les gens l'ont consulté

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;)
Copier après la connexion
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);
}
Copier après la connexion

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);
}
Copier après la connexion
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);
Copier après la connexion
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;
}
Copier après la connexion
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>
Copier après la connexion
Définissez le CSS suivant :

.two { --test: 10px; }
.three { --test: 2em; }
Copier après la connexion
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;
  }
}
Copier après la connexion
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;
}
Copier après la connexion
Résultat de la compilation

.mediabox {
  background: #7F583F; 
}
Copier après la connexion
2. Le préprocesseur ne peut pas limiter la portée

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}
Copier après la connexion
est compilé en

ul {
  color: blue; 
}
Copier après la connexion
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;
Copier après la connexion
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;);
}
Copier après la connexion
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 connexes :

Apprentissage PHP--variables variables,--variables variables

Journal d'apprentissage PHP - portée des variables, variables

Vidéos associées :

Tutoriels vidéo CSS et CSS3 de la Geek Academy

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal