Variables en CSS - pourquoi ne peuvent-elles pas être utilisées?

Question

Cela me dérange pendant un certain temps et je ne trouve pas la réponse nulle part: POURQUOI CSS pur ne nous permet pas d'utiliser des variables?

Nous connaissons tous les préprocesseurs SASS et LESS qui simplifient grandement notre vie, par exemple en nous laissant utiliser des variables. Y a-t-il une raison particulière pour laquelle le W3C n'a pas encore implémenté une telle fonctionnalité dans CSS?

Je suppose que tous les développeurs (également ceux du W3C) conviendraient que ce serait un grand pas en avant. Y a-t-il des raisons particulières pour lesquelles il n'a pas été pris (encore)?

Answer 1

pour conclure mes recherches:

Vous ne devez pas utiliser SASS ou MOINS à t Ake avantage des variables en CSS.

Pour définir certaines valeurs réutilisables dans CSS, vous devez les déclarer en utilisant la notation de propriété personnalisée, par ex. Puis, vous pouvez y accéder n'importe où dans votre fichier de styles en utilisant la fonction var(), par exemple. color: var(--main-color);

Exemple de travail ci-dessous:

:root { 
 
    --main-theme-color: red; 
 
} 
 

 
.one { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.two { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.three { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.four { 
 
    background-color: black; 
 
    color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="one"> </div> 
 
<div class="two"> </div> 
 
<div class="three"> </div> 
 
<div class="four"> RED </div>

Answer 2

bien il est une spécification appelées propriétés personnalisées https://www.w3.org/TR/css-variables-1/

mais le soutien est un peu un problème en ce moment .. mais il est là .. http://caniuse.com/css-variables/embed

vous pouvez/devez commencer par les variables css https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables