recherche

Maison  >  Article  >  interface Web  >  Analyse des variables CSS variable

Analyse des variables CSS variable

不言
不言original
2018-06-12 15:25:261900parcourir

Cet article présente principalement l'analyse des variables CSS.Il a une certaine valeur de référence.Maintenant, je le partage avec tout le monde.Les amis dans le besoin peuvent s'y référer

Les mots précédents

Depuis. ensuite, il n'y a pas de variables en CSS. Pour utiliser des variables CSS, vous ne pouvez utiliser que des précompilateurs tels que SASS ou LESS. Avec la sortie de la nouvelle version, définir et utiliser des variables directement en CSS n'est plus un fantasme. Cet article présentera en détail l'utilisation de base des variables CSS

Les variables CSS sont des entités définies par les auteurs CSS qui contiennent des valeurs spécifiques à réutiliser dans tout le document. Utilisez des attributs personnalisés pour définir des noms de variables et utilisez un var() spécifique pour accéder à

Compatibilité : les navigateurs mobiles et IE ne sont pas compatibles

【Déclarer les variables】

Les variables doivent démarrer avec --. Par exemple, --example-variable: 20px signifie attribuer 20px à la variable --example-varibale

Vous pouvez placer l'instruction déclarant la variable dans n'importe quel élément. peut le définir sur : root, body ou html 

:root{
  --bgColor:#000;
}

La déclaration de variable est comme l'instruction de déclaration de style ordinaire. Vous pouvez également utiliser le style en ligne 

<body style="--bgColor:#000">

La déclaration de variable. L'instruction doit être contenue dans un élément. Vous ne pouvez pas les placer arbitrairement 

//错误
<style>
--bgColor:#000;
</style>

【Utiliser des variables】

Utilisez la fonction var() pour utiliser des variables, et elles peuvent être utilisées n'importe où. Par exemple : var(--example-variable) renverra la valeur correspondant à --example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    </body>

La fonction var() a également un paramètre facultatif, qui est utilisé pour définir la valeur par défaut . Lorsque la variable ne peut pas Lors de l'obtention de la valeur, utilisez la valeur par défaut 

<body>
    <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>    </body>

Héritage et cascade

Comme les attributs de style ordinaires, les attributs de variable prennent également en charge l'héritage et la cascade. Dans l'exemple ci-dessous, la valeur variable de l'élément body est verte et la valeur variable de l'élément p est rouge selon le principe de cascade, la couleur d'arrière-plan finale de l'élément p est rouge 

<body style="--bgColor:green;">
    <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p>    </body>
Combinaison et calcul

【Combinaison】

Les variables CSS peuvent être utilisées en combinaison 

<style>.box{
    --top:20%;
    --left:30%;
    width: 100px;
    height: 100px;
    background-image: url(img/24/xiaoshu.jpg);
    background-position: var(--left)  var(--top);}</style><p class="box"></p>
Cependant, les variables CSS ne peuvent pas être combinées sous les formes suivantes, var( --color1)var(--color2) n'est pas reconnu par le navigateur, s'il est séparé, comme var(--color1) var(--color2), il sera analysé comme #333, qui ne peut pas non plus être reconnu par le navigateur 

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><p class="box"></p>
[Calcul]

　Les variables sont les mêmes que les valeurs de style ordinaires En plus des combinaisons, vous pouvez également utiliser calc pour le calcul

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>
JS.

　Les variables CSS peuvent interagir avec JS. A noter que vous ne pouvez utiliser que les méthodes getPropertyValue() et setProperty(), mais pas l'attribut style

[attribut style]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>
[getPropertyValue()]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</script>
【setProperty()】

<style>#box{    
    --color:lightgreen;
    background-color: var(--color);
    width: 100px;
    height: 100px;
    display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p>    <script>var oBox = document.getElementById(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</script>
Non pris en charge

Une chose à noter est que les variables ne prennent pas en charge !important

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><p class="box"></p>
La capture d'écran du navigateur est la suivante

Objectif

1. Maintenabilité

Maintenir un jeu de couleurs ou un jeu de tailles dans une page Web signifie que certains les styles apparaissent plusieurs fois dans les fichiers CSS et sont utilisés à plusieurs reprises. Lors de la modification d'un plan, qu'il s'agisse d'ajuster un certain style ou de modifier complètement l'ensemble du plan, cela deviendra un problème complexe, et une simple recherche et remplacement ne suffit pas. C'est là que les variables CSS s'avèrent utiles

<.> 2. Sémantique 
:root{
  --mainColor:#fc0;
}
.p1{
  color:var(--mainColor);
}
.p2{
  color:var(--mainColor);
}

Le deuxième avantage des variables est que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent lisibles et compréhensibles. main-text-color est plus facile à comprendre que #fc0 dans le document, surtout lorsque la même couleur apparaît dans différents fichiers

　3. Il est plus pratique d'implémenter @media media query

En général , les requêtes multimédias sont les suivantes

Cependant, si vous utilisez des variables, vous pouvez rationaliser le code 
c9ccee2e6ea535a969eb3f532ad9fe89.box{    
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    background-color: red}@media screen and (max-width:600px) {
    .box{
        width: 50px;
        height: 50px;
        padding: 10px;
        margin: 5px;        
    }}531ac245ce3e4fe3d50054a55f2659279890cd3db8af2c13be66110fccb4c14994b3e26ee717c64999d7867364b1b4a3

Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas être utile à l'apprentissage de chacun Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe ! 
<style>.box{    
    --base-size:10px;
    width: calc(var(--base-size) * 10);
    height: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 2);
    margin: calc(var(--base-size) * 1);
    background-color: red;}@media screen and (max-width:600px) {
    .box{
        --base-size:5px;    
    }}</style><p class="box"></p>

Recommandations associées :

Analyse de l'attribut positon de CSS

Comment définir un espace réservé via CSS

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!

php css chrome less html sass 全局变量 继承 var JS
Déclaration：
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
Article précédent：Analyse de l'attribut CSS positionArticle suivant：Analyse de l'attribut CSS position

Articles Liés

Voir plus