Цепные правила CSS

Question

Я определил некоторые цвета фона, которые буду использовать на моем сайте. Поэтому я могу легко установить цвет фона для различных элементов, таких как:

.background_highlite{
    background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
    background-color: rgb(201, 179, 156);  /*Moose Mousse*/
}

Теперь, если я хочу, чтобы все элементы textarea на моей странице имели цвет фона Moose Mousse в качестве фона, я хочу написать другое правило CSS, которое ссылается на .background_shadow, поэтому мне нужно только изменить значения rgb в одном месте .

Что-то вроде:

textarea{
    height:50px;
    background-color: background_highlite  /* want to feed forward to keep the rgb in one place */
}

Возможно ли это с помощью CSS?

Answer 1

Люди были разочарованы упрощенной структурой CSS и создали препроцессоры для более удобного написания CSS.Посмотрите, например, Меньше или CleverCSS .

Answer 2

Вы можете назначить всем элементам один и тот же класс, а затем установить цвет фона в CSS класса:

<textarea class="background_shadow">blah</textarea>

Помните, что вы можете назначить несколько классов любому элементу, поэтому вы можете использовать один класс только для управления цветом фона, а затем использовать другие классы для других ваших нужд:

<textarea class="background_shadow another_class something_else">...</textarea>

Answer 3

У вас есть два варианта работы:

1. Собственный CSS, который возможен, но не хорош в обслуживании.
2. Препроцессор, такой как xCSS , который может создавать более чистый код и предоставлять переменные.

Я предполагаю, что для простых проектов хорошо подойдет CSS. Но в более сложных случаях лучше использовать какие-то процессоры, такие как pals, о которых говорилось ранее.

В этом методе вы всегда можете использовать некое удобочитаемое правило, например: .blabla {min-height: 20px}, который препроцессор по вашей собственной логике преобразует в CSS, что могут понять все наши целевые браузеры, например .blabla {min-height: 20px; высота: авто! важно; высота: 20 пикселей;} и т. д.

Также в препроцессорах мне действительно нравится то, что вы можете исправить код, как здесь:

• .specialClass extends .basicClass {} // подробнее см. На extends
• .selector { { дисплей: блок; } сильный { цвет синий; } } // смотри больше у детей
• или что вам нужно, это vars { $ path = ../img/tmpl1/png; $ color1 = # FF00FF; $ border = border-top: 1px solid $ color1; } // подробнее на vars

Answer 4

Лучшее, что вы можете сделать:

.hilight textbox {
  background: black;
}
textbox {
  color: pink;
}
.background_shadow {
 background: grey;
}

Или, конечно, вы можете добавить класс .hilite к вашему div.

Answer 5

Извините, нет. CSS не поддерживает переменные или цепочки.

однако, есть библиотека javascript, которая позволяет это. http://lesscss.org/

Answer 6

Не совсем.http://dorward.me.uk/www/css/inheritance/ перечисляет ваши основные параметры.