я могу использовать глобальную константу в секции <style>?

Question

Я хотел бы использовать глобальную константу для стиля css. например,

table td {border: 1px solid mycolor}

можно ли определить mycolor в другом файле, например в файле конфигурации? так что я могу изменить фактический цвет по цветовой теме.

Answer 1

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

CSS Переменные

:root {
  --color: red;
}

и ваш Vue блок стиля компонента :

<style>
.some-class {
  color: var(--color);
}
</style>

Пример с S CSS

S CSS Переменные в файле, например: /assets/vars.scss

$color: red;

и ваш Vue блок стиля компонента:

<style lang="scss">
@import "~/assets/vars.scss";

.some-class {
  color: $color;
}
</style>