can I use global constant in <style> section?

问题

I would like to use global constant for css style. for example,

table td { border: 1px solid mycolor }

can I define mycolor in other file such as config file? so that I can change actual color by color theme.

回答1:

I believe you mean global CSS variables and yes you can but be mindful of browser support. If you're using a pre-processor like SCSS, you can define and share variables too.

CSS Variables

:root {
  --color: red;
}

and your Vue component style block:

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

An example with SCSS

SCSS Variables in a file for example: /assets/vars.scss

$color: red;

and your Vue component style block:

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

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

来源：https://stackoverflow.com/questions/61050786/can-i-use-global-constant-in-style-section