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
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
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
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('body')[0].style.setProperty('--color', 'red')
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: 'hello'; --foo: var(--bar)' world'; body:after { content: '--screen-category : '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); }
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo);
.foo { --side: margin-top; /* 无效 */ var(--side): 20px; }
class="one"> <p class="two"> <p class="three"> </p> <p class="four"> </p> <p> </p>
.two { --test: 10px; } .three { --test: 2em; }
p { --color: #7F583F; --bg: #F7EFD2; } .mediabox { color: var(--color); background: var(--bg); } @media screen and (min-width: 768px) { body { --color: #F7EFD2; --bg: #7F583F; } }
$color:#7F583F; @media screen and (min-width: 768px) { $color: #F7EFD2; } .mediabox { background: $color; }
.mediabox { background: #7F583F; }
$zcolor:blue; .ulbox { $zcolor:red; } ul{ color: $zcolor; }
ul { color: blue; }
:root{ --testMargin:70px; } // 读取 var root = getComputedStyle(document.documentElement); var cssVariable1 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable1); // '70px' // 写入 document.documentElement.style.setProperty('--testMargin', '100px'); var cssVariable2 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable2); // '100px' // 删除 document.documentElement.style.removeProperty('--testMargin'); var cssVariable3 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable3); // '70px'
/*css*/ @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ } // Js if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) { alert('CSS properties are supported'); } else { alert('CSS properties are NOT supported'); }
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!