Переменные в CSS - почему их нельзя использовать?

Question

Это довольно беспокоит меня какое-то время, и я не могу найти ответ нигде: ПОЧЕМУ не чистый CSS позволяет нам использовать переменные?

Мы все знаем о препроцессорах SASS и LESS, которые делают нашу жизнь намного проще - например, просто позволяя нам использовать переменные. Есть ли какая-то особая причина, почему W3C еще не реализовал такую ​​функцию в самом CSS?

Я полагаю, что все разработчики (также те, от W3C) согласятся с тем, что это будет отличный шаг вперед. Существуют ли какие-либо особые причины, по которым это еще не было принято?

Answer 1

чтобы завершить свое исследование:

Вы НЕ должны использовать SASS или LESS к т ake преимущество переменных в CSS.

Чтобы установить некоторые значения многократного использования в CSS, вы должны объявить их с помощью пользовательской нотации свойств, например. --main-color: black;

Затем вы можете получить к ним доступ в любом месте вашего файла стилей, используя функцию var(), например. color: var(--main-color);

Рабочий пример ниже:

: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

Ну есть спецификации называемые пользовательские свойства https://www.w3.org/TR/css-variables-1/

но поддержка является немного вопрос прямо сейчас .. но она есть .. http://caniuse.com/css-variables/embed

вы можете/должны начать с CSS переменных https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables