Вопрос:
Я пытаюсь получить свойство класса из другого класса.
Вот мой простой тестовый HTML:
<div class=’test bgcolor’> An arrow! </div>
И вот мой CSS:
.test{ position: relative; color: red; width: 50%; margin: 30px; padding: 20px; } .bgcolor{ background-color: yellow; } .test:after{ right: 100%; top: 50%; border: solid transparent; content: » «; position: absolute; border-right-color: yellow; border-width: 10px; margin-top: -10px; }
Класс bgcolor устанавливает цвет фона и может быть изменен с желтого на другой цвет в типичной ситуации.
И test:after для маленькой стрелки и цвета стрелки должен быть таким же, как и в поле, которое определяется атрибутом background-color в классе bgcolor.
Теперь у меня возникла проблема с тем, как установить параметр border-right-color в ‘test: after’ со значением background-color в bgcolor.
Если эта проблема может быть решена, единственное, что мне нужно изменить цвет (стрелка + окно), – это просто изменение цвета в bgcolor.
Пожалуйста, дайте мне совет.
Спасибо.
Лучший ответ:
То, что вы ищете, это переменные CSS. Они сделали бы что-то вроде этого:
—testBGColor: yellow; .bgcolor { background-color:var(—testBGColor); } .test:after { border-right-color:var(—testBGColor); … }
Проблема с этим подходом заключается в том, что переменные CSS еще не поддерживаются основными браузерами: могу ли я использовать переменные CSS?
Таким образом, вам придется использовать препроцессор CSS как LESS или SASS.
Решение с МЕНЬШЕ:
@testBGColor: yellow; .bgcolor { background-color:@testBGColor; } .test:after { border-right-color:@testBGColor; … }
Но помните, что LESS является препроцессором, означающим, что вышеуказанный код будет скомпилирован в чистый CSS либо во время исполнения, либо после кодирования. Это не часть CSS.
Ответ №1
Разве это не работает?
} .bgcolor{ background-color: yellow; border-color: yellow; border-width: 0; } .test:after{ right: 100%; top: 50%; border: solid transparent; content: » «; position: absolute; border-width: 10px; margin-top: -10px; } Ответ №2
Вы можете сделать это, используя препроцессор, такой как Sass или Less, объявляющий переменную и использующий ее в ваших классах.
$yellow: #FFC900; .bgColor { background-color: $yellow; } .test:after { border-right-color: $yellow; … }
Это пример Сасса.
Ответ №3
Добавьте в div еще один класс, например “.theme-1” для первого цвета и настройте его
.bgcolor.theme-1{ background-color: red; border-color: red; } .bgcolor.theme-1:after{ border-right-color: red; }
и т.д. с “.teme-2”, “. theme-3” и т.д.