Detailed explanation of using CSS3's var() to change scss variable values ​​at runtime

var() Introduction and Usage

Details (MDN) IE is invalid, other mainstream browsers are valid

var() Usage

Can only be declared in {}, the scope is determined by the selector of {}

<!-- Disclaimer-->
body{
  --name:value; //Valid in body}


<!-- Usage -->
.test{
  attr: var(--name,defaultValue) //When --name does not exist, use defaultValue
  
  var(--name):#369;//Wrong usage}

The native variable definition syntax in CSS is: –*, and the variable usage syntax is: var(–*), where * represents our variable name.

However, it cannot contain characters such as $, [, ^, (, %, etc. Ordinary characters are limited to the combination of "numbers [0-9]", "letters [a-zA-Z]", "underscore _", and "hyphen -", but it can be Chinese, Japanese, or Korean.

Changing scss variable values ​​at runtime

This method does not directly change the value of the scsss variable, but it can achieve the same effect. It is more effective and concise for a variable to control multiple attributes. It is unnecessary to use a single variable to control a single attribute. This method is just to modify the style attribute. One-to-one is the same as writing the attribute in the style.

Principle(English)

Simply put, the scss variables are controlled by css variables

$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

Selector1{
  @each $name, $color in $colors {
    --color-#{$name}: $color;
  }
}

<!-- Generation effect of Selector1-->
:root {
  --color-primary: #FFBB00;
  --color-secondary: #0969A2;
}


<!-- Usage method 1: directly use css variables -->
Selector{
  color:var(--color-primary);
}

<!-- Usage 2 uses scss functions to comply with scss syntax recommendations -->  
@function color($color-name) {
  @return var(--color-#{$color-name});
}

body { 
  color: color(primary); //Use}

<!-- body generation effect -->
body { 
  color: var(--color-primary); //This can be set by js}

js sets css variables, that is, sets and runs scss variables

domObject.style.setProperty(name,value); //name is the CSS variable name eg: --color-primary

So far, the runtime change of variable values ​​in scss has been completed. I am not sure about the specific application scenario, but I encountered it.

My application scenario:

Custom components need to expose some style properties for users to adjust freely, similar to themes, but I don’t want to use string concatenation to complete it, which is too wasteful. Every time a value is changed, the entire style must be rewritten, and this involves frequent modifications to the DOM, which is not in line with the idea of ​​Vue, and it is too cumbersome to write directly in CSS.

So I use scss to write styles. SCSS nesting is really easy to use. LESS does not support nested attributes, which is very uncomfortable to use and not as concise as scss.
Since scss is precompiled, the variable value cannot be changed at runtime, and I need to change it, so I went to Google and got a satisfactory solution-> Principle (English)

Special attention

If you use scoped in a single file component (.vue), the effects of selectors such as :root and :body will not be as you expect.

[data-v-1374924e]:root {
  --test:100px;
}

In this case, the variable -test cannot be found at all because there is no root. The scoped feature of the Vue component is only valid in this component, but the component does not have a complete document, that is, there is no root inside the component.

So in the vue file, carefully consider the selector scope of the CSS variable declaration to avoid invalid variables

This concludes this article on how to use CSS3's var() to change scss variable values ​​at runtime. For more information about how to change scss variable values ​​with CSS3, please search 123WORDPRESS.COM's previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!