Можно ли определить переменную в CSS?

Question

Я изучаю CSS и HTML, и я делаю простой пример кода. В моем CSS я использую для многих стилей цвет, чтобы установить цвет рамки или цвет текста!

Могу ли я определить этот цвет для общего имени? Я спрашиваю об этом, потому что я думаю, что если я захочу изменить его позже, это намного проще изменить 1 строку!

Пример:

DEFINE MYCOLOR #000000 

h1{text-color:MYCOLOR;} 
#mydiv{background-color:MYCOLOR;} 

Я нашел эту статью (Is it possible to define constants in css?), но это не работает для меня (так что это не дублируется), потому что один ответ сказал, чтобы использовать класс, и он не работает потому что я использую MYCOLOR с разными свойствами, а другие ответы говорят о том, чтобы использовать расширение CSS.

Можно ли это сделать с помощью чистого CSS и HTML?

(Это мой первый пост, так что извините, если это немного сбивает с толку ...)

Answer 1

Вам понадобится предварительный процессор SCSS для использования переменных (или - используя термин «свободные константы») при написании стилей.

двух основных игроков в области предварительной обработки являются:

• SASS (мой личный фаворит, особенно при использовании с compass)

• Less

Некоторые примеры :

SASS (с использованием СКС синтаксис):

$mycolor: #000000; 

h1 { color: $mycolor; } 

МЕНЬШЕ

@mycolor: #0000000; 

h1 { color: @mycolor; } 

Для начала, мое предложение было бы поиграть с обоими в Codepen или CSSDeck (которые оба предлагают ШАОН/LESS live компиляция), чтобы получить представление о синтаксисе.

Предварительные процессоры также предоставляют вам более программные вещи, такие как микшины и управляющие структуры. Внимание: После того, как вы начали предварительную обработку, что трудно вернуться:)

Answer 2

Нет, простой CSS не дает вам возможность, как это.

Если вам нужна эта функция, вам нужно использовать что-то вроде Less.

Answer 3

Ну, короткий ответ да, но не сейчас (и, возможно, не на некоторое время)

http://css3.bradshawenterprises.com/blog/css-variables/ объясняет, как используйте метод, который был реализован для тестирования в новейших версиях Chrome.

Идея заключается в том, чтобы использовать такой код:

:root { 
    var-color: rgba(255,0,0); 
} 

h1 { 
    color: var(color); 
} 

В действительности, хотя, код для этого был удален из Webkit, и многие люди отмечают, что они не очень нравится.

Следовательно, люди часто используют SASS или LESS.

Я также писал о том, что:

http://css3.bradshawenterprises.com/blog/why-sass/

SASS делает это так же просто, как:

$brand-color: rgb(255,0,0); 

h1 { 
    color: $brand-color; 
} 

Answer 4

Вы можете использовать препроцессор выполнить свой вопрос, и у вас есть более чем один выбор. Как упоминалось в других ответах, вы можете использовать LESS или SASS.

Если вам нужна помощь в определении того, какой из них подходит для вас рассмотреть чтение этого post by Chris Coyier.

Answer 5

Вы можете сделать что-то вроде этого:

.mycolorText{ 
    color: #000000; 
} 
.mycolorBg{ 
    background-color: #000000; 
} 

Затем в HTML вы это делаете:

<h1 class="mycolorText"> 
<div class="mycolorBg"> 

Трюк с css и определение таких вещей, что вы можете комбинировать классы по вашим элементам.

Это означает, что вы можете сделать это:

<div class="mycolorBg mycolorText"> 

Хотя это не позволяет сделать это в одном месте, это позволит вам сделать это всего за 2 места, которые по-прежнему довольно просто обновить.

В противном случае вам придется делать то, что говорят другие, и использовать css-препроцессор.