What are CSS variables? Learning about CSS variables: Inheritance & scope of CSS variables-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What are CSS variables? Learning about CSS variables: Inheritance & scope of CSS variables

php是最好的语言

Jul 30, 2018 pm 02:30 PM

css

What CSS variables can help us do

In some imperative programming languages, like Java, C or JavaScript, we can track certain states through variables. A variable is a symbol associated with a specific value, and the value of the variable can change over time.
In a declarative language like CSS, values that change over time do not exist, and there is no concept of variables.
CSS introduces the concept of hierarchical variables to easily cope with maintainability challenges. This will allow a variable to be symbolically referenced in the entire CSS tree

1. What is a CSS variable

CSS variables currently have two forms:

Variables , that is, having legal identifiers and legal values. Can be used anywhere. Variables can be used using the var() function. For example: var(--example-variable) will return the value corresponding to --example-variable
Custom attribute. These properties use the special format --where as their names. For example --example-variable: 20px; even a css declaration statement. It means assigning 20px to the --example-varibale variable

2. Variable declaration

Variable naming

The variable declaration uses two conjunction lines--to represent the variable, $color is a syntax that belongs to Sass, and @color is a syntax that belongs to Less. To avoid conflicts with css native variables, use --)

Note: Variable names are case-sensitive, --header-color and --Header-Color are two different variables

Declaration method

The CSS variable declaration method is very simple, as follows, a CSS named color is declared variable.

Write in the css file
Write in the inline-style of the html tag
Use JS to declare an element, method .style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)

Type of variable value

If the variable value is a string, it can be spliced with other strings

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}

If the variable value is a numerical value, it cannot be used directly with the numerical unit. You must use the calc() function to connect them

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

If the variable value has a unit, it cannot be written as a string

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

Note: The variable value can only be used as the attribute value, not the attribute name

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

In the above code, the variable --side is used as the attribute name, which is invalid

3. Inheritance & Scope of CSS Variables

Custom properties also support inheritance. If there is no custom attribute defined on an element, the value of the custom attribute will be inherited from its parent element

class="one">
  <p class="two">
    <p class="three">
    </p>
    <p class="four">
    </p>
  <p>
</p>

Define the following CSS:

.two { --test: 10px; }
.three { --test: 2em; }

In this example, var(--test) The result is:

class="two" corresponding node: 10px
class="three" corresponding node: element: 2em
class="four" corresponding node: 10px (inherited from its parent)
class="one" corresponding node: invalid value, that is, the value of this attribute is the default value that has not been overridden by the custom css variable

The top-level scope is: root

4. Responsiveness

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

5. Differences from preprocessor

1. Preprocessor variables are not real-time

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

Compilation results

.mediabox {
  background: #7F583F; 
}

2. Preprocessor cannot be limited Scope

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

Compile to

ul {
  color: blue; 
}

3. Preprocessor variables are not interoperable

Native CSS custom properties can be used with any CSS preprocessor or pure CSS file Use together

6. JS operation variables

CSS variables can interact with JS

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;

7. Compatibility

Check whether the browser supports CSS auto- Method of defining attributes

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}

Summary

Compared with traditional preprocessor variables such as LESS and SASS, the advantages of CSS variables are:

The dynamic nature of CSS variables can be changed while the page is running, while traditional preprocessor variables cannot be changed after compilation
CSS variables can be inherited, used in combination, and have scope
Used with Javascript, you can easily read/write from JS

Learning of PHP- -Variable variables,--Variable variables

php Learning log-Variable scope, variables

The above is the detailed content of What are CSS variables? Learning about CSS variables: Inheritance & scope of CSS variables. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties