Vue implements site peels -CSS variables

There are many kinds of skin, this article uses CSS variables to achieve

Let’s start with CSS variables.

Definition of variables

When declaring a variable, the variable name is preceded by two conjunction lines (–).

    /* All kinds of values can be put into CSS variables. * /
    :root{
      --foo: #7F583F;
      --bar: #F7EFD2;
    }
    /* Declare two variables in the body */
    body {
      --foo: #7F583F;
      --bar: #F7EFD2;
    }
Copy the code

Why choose two conjunction lines (–) to represent variables? Because $foo is used by Sass and @foo is used by Less. To avoid collisions, the official CSS variables are replaced with two conjunction lines.

Var () function

The var() function is used to read declared variablescolor: var(--foo);
The var() function can also take a second argument that represents the default value of the variable. If the variable does not exist, the default value is used.color: var(--foo, #7F583F);
- The second argument does not handle internal commas or Spaces, which are treated as part of the argument.
```
    var(--font-stack, "Roboto", "Helvetica");
    var(--pad, 10px 15px 20px);
Copy the code
```

The var() function can also be used to declare variables.

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}
Copy the code

Note that variable values can only be used as attribute values, not attribute names.

The type of a variable value

If the variable value is a string, it can be concatenated with other strings. --bar: 'hello'; --foo: var(--bar)' world'; If the value of a variable is numeric, it cannot be used directly with a numeric unit. .foo { --gap: 20; /* void */ margin-top: var(--gap)px; } + values and units written directly together, this is not valid. You must concatenate them using the calc() function. .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); } + If the variable value has a unit, it cannot be written as a string. /* Invalid */. Foo {--foo: '20px'; font-size: var(--foo); } /* valid */. Foo {--foo: 20px; font-size: var(--foo); } ` ` `Copy the code

Var scope

The same CSS variable can be declared in multiple selectors. When read, the declaration with the highest priority takes effect. This is consistent with the CSS cascade rule.

<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); Blue} < / style > < p > < / p > < div > green < / div > < div id = "alert" > red < / div >Copy the code

The scope of a variable is the valid scope of its selector.

/* The foo variable is scoped to the body selector and the bar variable is scoped to the.content selector. * /
    body {
      --foo: #7F583F;
    }
    
    .content {
      --bar: #F7EFD2;
    }
 /* Global variables are usually placed in the root element, ensuring that any selector can read them. * /
   :root{-main-color: #06c;
   }
Copy the code

Responsive layout

CSS is dynamic, and any changes to the page will result in changes in the rules used. Taking advantage of this feature, variables can be declared in the media command of a reactive layout, so that different screen widths have different variable values.

  body {
    --primary: #7F583F;
    --secondary: #F7EFD2;
  }
  
  a {
    color: var(--primary);
    text-decoration-color: var(--secondary);
  }
  
  @media screen and (min-width: 768px) {
    body {
      --primary:  #F7EFD2;
      --secondary: #7F583F; }}Copy the code

compatibility

CSS variables are now supported by almost all browsers (ie9 not supported below)

/* For browsers that do not support CSS variables, use the following notation. * /
  a {
    color: #7F583F;
    color: var(--primary);
  }
/* You can also use the @support command. * /
  @supports((--a: 0)) {
    /* supported */
  }
  
  @supports ( not (--a: 0)) {
    /* not supported */
  }
Copy the code

Js operation

JavaScript can also detect if the browser supports CSS variables.

    const isSupported =
      window.CSS &&
      window.CSS.supports &&
      window.CSS.supports('--a', 0);
    
    if (isSupported) {
      /* supported */
    } else {
      /* not supported */
    }
Copy the code

JavaScript manipulation of CSS variables is written as follows.

    // the variable declared in the body
    // Set variables
    document.body.style.setProperty('--primary'.'#7F583F');
    
    // Read variables
    document.body.style.getPropertyValue('--primary').trim();
    // '#7F583F'
    
    // Delete variables
    document.body.style.removeProperty('--primary');
  
    // Declared on the root element: variable operations in root
    // Set variables
    document.documentElement.style.setProperty('--primary'.'#7F583F');
    
    // Read variables
    document.documentElement.style.getPropertyValue('--primary').trim();
    // '#7F583F'
    
    // Delete variables
    document.documentElement.style.removeProperty('--primary');
  
    // This means that JavaScript can store any value to the stylesheet. Here is an example of listening for events that are stored in CSS variables.
    const docStyle = document.documentElement.style;
    
    document.addEventListener('mousemove'.(e) = > {
        docStyle.setProperty('--mouse-x', e.clientX);
        docStyle.setProperty('--mouse-y', e.clientY);
    });

Copy the code

Information that is not useful for CSS can also be put into CSS variables.

--foo: if(x > 5) this.width = 10; What does that mean? We can use it to do some operations. If performance is not considered, we can store data in CSS variables. Instead of caching, VUex can store tokens in variables, and it is also responsive.Copy the code

In the skin

Skin, put all CSS color fields related to the skin in the root element :root declaration, use JS to replace the operation.

With reference to article

www.w3cplus.com/css3/css-pr…
www.ruanyifeng.com/blog/2017/0…