“This is the seventh day of my participation in the First Challenge 2022.

What are CSS variables?

Custom attributes (sometimes referred to as CSS variables or cascading variables) are defined by CSS authors and contain values that can be reused throughout the document. Set values by custom attribute tags (e.g. –main-color: black;) Var () : var(–main-color);

What are the differences between CSS variables and preprocessing tools like Less?

CSS variables give us some preprocessor benefits without requiring additional compilation. Less You need to add less-loader to the Webpack for processing.

One major disadvantage of the variables used by Less is that they are static and cannot be changed at run time. CSS variables, however, support dynamic JS modification.

Introduction to the use of CSS variables

:root{-main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}
Copy the code

–main-color is a custom variable name with a value of # 06c. Notice that all custom variables start with two dashes.

The var() function retrieves the custom variable name and replaces it with the custom variable value, producing the color # 06C, which can be used in the var function as long as the variable is defined somewhere in the h1 parent of the stylesheet.

Custom attributes are constrained by cascades and inherit their values from their parent. By setting CSS variables on the :root pseudo-class, you can then use them wherever you want throughout the document.

Note that custom properties are case sensitive, so –header-color and –header-color are different CSS variables.

Dynamically modify variables through media queries and then set page margins.

:root { --gutter: 4px; } section { margin: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 16px; }}Copy the code

Modify CSS variables in JavaScript, dynamically changing style colors.

<head>
  <style>
    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    }
</style>
</head>
<p>hello world</p>
<script>
  let styles = getComputedStyle(document.documentElement)
  let value = styles.getPropertyValue('--primary-color') // Get the style
  document.documentElement.style.setProperty('--primary-color'.'green'); // Reset the style
</script>
Copy the code

A few properties and methods about styles are reviewed here.

Any HTML element that supports the style feature has a corresponding style attribute in JavaScript. This style object is an instance of the CSSStyleDeclaration and contains all the style information specified by the STYLE feature of HTML, but does not contain styles that are layered with external or embedded style sheets.

<head>
  <! -- Does not include the link tag style -->
  <link rel="stylesheet" href="./reset.css">
  <! -- does not include the style tag style -->
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <! -- including the style attribute of the DOM element -->
    <div class="box" id="box" style="color: red;"></div>
  </div>

  <script>
    const box = document.getElementById('box')
    console.log(box.style.color) // red
  </script>
</body>
Copy the code

The Style object defines properties and methods. These properties and methods, while providing the element’s style property value, can also modify the style.

  • GetPropertyValue (propertyName) : Returns the string value of the given property.
  • RemoveProperty (propertyName) : Removes the given property from the style.
  • SetProperty (propertyName, value, priority) : a given property is set to the corresponding values.

The CSS code in the Style feature is accessed through the cssText property. In read mode, cssText returns the browser’s internal representation of the CSS code in the Style feature. In write mode, the value assigned to cssText overrides the value of the entire style feature; That is, the style information previously specified by the style feature is lost.

<head>
  <! -- Does not include the link tag style -->
  <link rel="stylesheet" href="./reset.css">
  <! -- does not include the style tag style -->
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <! -- including the style attribute of the DOM element -->
    <div class="box" id="box" style="color: red;"></div>
  </div>

  <script>
    const box = document.getElementById('box')
    box.style.background='red'
    console.log(box.style.cssText) // color: red; background: red;
  </script>

</body>
Copy the code

While the Style object can provide style information for any element that supports the Style feature, it does not contain style information that is layered from other style sheets and affects the current element.

Get the style of the calculation using the getComputedStyle() method. This method takes two arguments: the element to get the computed style and a pseudo-element string (for example, “:after”).

  <script>
    const box = document.getElementById('box')
    console.log(getComputedStyle(box).height) // 100px
  </script>
Copy the code

Those of you who have used Sass or less know that they can mainly have nested and variable and function functions. In fact, in native CSS, it is gradually supported, but the syntax is not powerful enough, such as nesting writing. And it has not been widely used due to compatibility issues with CSS variable browsers.

Advantages of using saas and Less preprocessors

  • Provides a style layer reuse mechanism missing from the CSS layer
  • Reduce redundant code
  • Improve the maintainability of style code

Saas and LESS preprocessors provide abstraction mechanisms for variables, nesting, blending, operators, functions, and more that are required for general programming.