Using VAR () of CSS3 to change the variable value of SCSS at run time

Time:2021-10-9

Introduction and use of var()

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

Var() use

It can only be declared within {}, and the scope is determined by the selector of {}

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


<!--  Use -- >
.test{
  Attr: VAR (- - name, DefaultValue) // when -- name does not exist, use DefaultValue
  
  var(--name):#369;// Incorrect 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 $, [, ^, (,%) and other characters. Ordinary characters are limited to the combination of “number [0-9]”, “letter [a-za-z]”, “underscore” and “dash -“, but can be Chinese, Japanese or Korean.

Changing the value of the SCSS variable at run time

This method can not directly change the value of scsss variable, but it can achieve the same effect. It is more effective and concise for those that need one variable to control multiple attributes
There is no need to use single variable to control a single attribute. This method is to modify the style attribute. The one-to-one attribute is the same as the one you write in 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 1: directly use CSS variables -- >
Selector{
  color:var(--color-primary);
}

<!--  Usage 2: use 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 to set the CSS variable, that is, to set the running SCSS variable

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

So far, I have completed the SCSS run-time variable value change. I don’t know the specific application scenario, but I have encountered it.

My application scenario:

Custom components need to expose some style attributes for users to freely adjust, similar topics, and I don’t want to complete them by string splicing. It’s too wasteful. Every time I change a value, I have to rewrite the whole style. Moreover, this involves frequent modification of DOM, which is not in line with the idea of Vue, and it’s too cumbersome to write directly in CSS.

So I use SCSS to write styles. SCSS nesting is easy to use. Less doesn’t support attribute nesting. It’s very uncomfortable. It’s not as concise as SCSS.
Because SCSS is precompiled, I can’t change the variable value at runtime, and I need to change it again, so I went to Google and got a satisfactory solution – >Principle (English)

Particular attention

If scoped is used in a single file component (. Vue), the effect of selectors such as: root and: body will not be as you expect


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

For example, the variable – test cannot be found at all. The reason is that without this root, the scoped feature of 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

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

This is the end of this article about how to use CSS3 var () to change the variable value of SCSS at runtime. For more information about CSS3 changing the variable value of SCSS, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

New childhood fairy tale [139] little prince 32 — I planted this tree

Pain makes people sober. Everything in life originally depends on themselves. The mercy of others can’t win a better future. A petite thief said, “this time… I planted the tree and this time… I opened the road. If you want to buy the road money this time… ························································································· Another tall thief who blocked the way […]