Как получить свойство из другого класса в CSS?

Я пытаюсь получить свойство класса из другого класса.

Вот мой простой тестовый 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.

Разве это не работает?

 }
.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;
}

Вы можете сделать это, используя препроцессор, такой как Sass или Less, объявляющий переменную и использующий ее в ваших классах.

$yellow: #FFC900;

.bgColor { background-color: $yellow; }

.test:after {
border-right-color: $yellow;
...
}

Это пример Сасса.

Добавьте в div еще один класс, например “.theme-1” для первого цвета и настройте его

.bgcolor.theme-1{
background-color: red;
border-color: red;
}

.bgcolor.theme-1:after{
border-right-color: red;
}

и т.д. с “.teme-2”, “. theme-3” и т.д.