Bootstrap 4 - ссылка на цвет по корневому имени в css

Я использую красивую тему Bootstrap 4 css, которая переопределяет тему по умолчанию с очень красивыми цветами, но я не могу «ссылаться» на цвет по его корневому имени из css.

Давайте объясним лучше, Bootstrap имеет некоторые корневые цвета, которые называются «успех», «опасность», «темный», «светлый» и т. д. (и, следовательно, шаблон css пользовательской темы), и, конечно же, они имеют шестнадцатеричное представление и Я хотел бы применить один из этих цветов к наведению ссылки, вызывая его по его корневому имени, а не по его шестнадцатеричному коду.

Чтобы быть более ясным, я хотел бы сделать что-то вроде следующего:

.dropdown-menu > a:hover {
  color: success; /*or dark or danger or whatever */
}

Таким образом, если я изменю шаблон в будущем, все цвета будут автоматически скорректированы в соответствии с новыми значениями шаблона, и внешний вид всех приложений останется в «гармонии» с новым общим аспектом шаблона.

Я не уверен, что это возможно с использованием чистого css, но, возможно, есть обходной путь.

Как вы видите, моя цель состоит в том, чтобы иметь столько цветов, на которые я могу ссылаться по имени (скажем, динамически, а не статически, используя шестнадцатеричный), поэтому, если я изменю шаблон bootstrap css, все цвета автоматически адаптируются к новым значениям шаблона.

Любая помощь/идеи?


person Diego Perez    schedule 26.09.2018    source источник
comment
Вы можете использовать переменные CSS или препроцессор CSS   -  person Quentin Veron    schedule 26.09.2018
comment
Спасибо за ваше время @Quentin Veron. Не знал о переменных CSS, и это отлично сработало, и хотя он не полностью поддерживается всеми браузерами, как сказал Итай Гал, я пробовал в трех основных браузерах, и это сработало, так что пока я буду использовать его как есть проще, чем Sass.   -  person Diego Perez    schedule 26.09.2018


Ответы (3)


Это переменные CSS. Вы можете ссылаться на них, как...

.dropdown-menu > a:hover {
  color: var(--success);
}

https://codeply.com/go/vFE9n0VrGz

Связано: CSS использует цвет из другого класса?

person Zim    schedule 26.09.2018
comment
Спасибо @Зим. Как я уже сказал, я не знал о переменных CSS, и это отлично сработало, и хотя он не полностью поддерживается всеми браузерами, как сказал Итай Гал, я попробовал его в трех основных браузерах (включая мобильные), и это сработало. так что пока я пойду с ним, так как он проще, чем Sass, и отмечу ваш ответ как правильный. - person Diego Perez; 26.09.2018
comment
Он широко поддерживается, за исключением IE 11 и Opera. - person Zim; 26.09.2018

Вы можете установить его ранее в коде и вызвать его, как показано ниже.

:root {
  --success: #66CD00;
}

.dropdown-menu > a:hover {
  background-color: var(--success);
}
person IJ D    schedule 26.09.2018
comment
Спасибо @IJ D, ваш ответ такой же, как у Зима, который уже помечен как правильный. - person Diego Perez; 26.09.2018
comment
Я полагаю, вы используете это только тогда, когда не используете scss? - person Miguel Stevens; 22.02.2019

Переменные CSS поддерживаются не полностью:

Можно ли использовать переменные CSS?

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

Примечание. Bootstrap 4 был написан с использованием Sass (файлы .scss).

person Itay Gal    schedule 26.09.2018
comment
Большое спасибо @Itay Gal, вы технически правы, и ваш ответ должен быть помечен как таковой, но я не знаю о Sass, и я искал простое решение, и переменные CSS работали в некоторых основных браузерах (включая мобильные) так что пока я буду использовать это решение, пока у меня не будет времени углубиться в Sass. - person Diego Perez; 26.09.2018