Analysis of CSS variables variable-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Analysis of CSS variables variable

不言

Jun 12, 2018 pm 03:25 PM

This article mainly introduces the analysis of CSS variables, which has certain reference value. Now I share it with everyone. Friends in need can refer to the previous words

Since then, there are no variables in CSS. To use CSS variables, you can only use precompilers such as SASS or LESS. With the release of the new draft, defining and using variables directly in CSS is no longer a fantasy. This article will introduce CSS variables in detail

Basic usage

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout the document. Use custom attributes to set variable names, and use specific var() to access

Compatibility: Mobile and IE browsers are not compatible

[Declaration of variables]

Variables must start with

. For example, --example-variable: 20px means assigning 20px to the --example-varibale variable. You can place the statement declaring the variable within any element. If you want to set a global variable, you can set it to: root, body or html

:root{
  --bgColor:#000;
}

The variable declaration is just like the ordinary style declaration statement. You can also use the inline style

<body style="--bgColor:#000">

The variable declaration statement must be included in an element and cannot be placed randomly.

//错误
<style>
--bgColor:#000;
</style>

【Use variables】

Use the var() function to use variables, and can be used anywhere. For example: var(--example-variable) will return the value corresponding to --example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    </body>

The var() function also has an optional parameter, which is used to set the default value when the variable cannot obtain the value. When, the default value is used

<body>
    <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>    </body>

Inheritance and cascading

Like ordinary style attributes, variable attributes also support inheritance and cascading. In the following example, the variable value of the body element is green, and the variable value of the p element is red; based on the principle of cascading, the final background color of the p element is red

<body style="--bgColor:green;">
    <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p>    </body>

Composition and calculation

【 Combination】

CSS variables can be used in combination

<style>.box{
    --top:20%;
    --left:30%;
    width: 100px;
    height: 100px;
    background-image: url(img/24/xiaoshu.jpg);
    background-position: var(--left)  var(--top);}</style><p class="box"></p>

However, CSS variables cannot be combined in the following forms. var(--color1)var(--color2) is not recognized by the browser. If separated, such as var(--color1) var(--color2), it will be parsed as #333 and cannot be recognized by the browser

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><p class="box"></p>

【Calculation】

Variables and ordinary styles The values are the same. In addition to combination, you can also use calc for calculation

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>

CSS variables can interact with JS. It should be noted that you can only use the getPropertyValue() and setProperty() methods, but not the style attribute

[style attribute]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>

[getPropertyValue()]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</script>

【setProperty()】

<style>#box{    
    --color:lightgreen;
    background-color: var(--color);
    width: 100px;
    height: 100px;
    display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p>    <script>var oBox = document.getElementById(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</script>

Not supported

One thing to note is that the variable is not supported!important

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><p class="box"></p>

The chrome browser screenshot is as follows

Purpose

1. Maintainability

Maintaining a color scheme or size scheme in a web page means that some styles are used multiple times in the CSS file appear and are reused. When modifying a plan, whether it is adjusting a certain style or completely modifying the entire plan, it will become a complex problem, and simple search and replacement is not enough. At this time, CSS variables come in handy

:root{
  --mainColor:#fc0;
}
.p1{
  color:var(--mainColor);
}
.p2{
  color:var(--mainColor);
}

2. Semantic

The second advantage of variables is that the name itself contains semantic information. CSS files become readable and understandable. main-text-color is easier to understand than #fc0 in the document, especially when the same color appears in different files

　3. More convenient implementation of @media media query

Generally, media queries are as follows

<style>.box{    
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    background-color: red}@media screen and (max-width:600px) {
    .box{
        width: 50px;
        height: 50px;
        padding: 10px;
        margin: 5px;        
    }}</style><p></p>

However, if you use variables, you can streamline the code

<style>.box{    
    --base-size:10px;
    width: calc(var(--base-size) * 10);
    height: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 2);
    margin: calc(var(--base-size) * 1);
    background-color: red;}@media screen and (max-width:600px) {
    .box{
        --base-size:5px;    
    }}</style><p class="box"></p>

The above is the entire content of this article, I hope it will be helpful to everyone's learning, more Please pay attention to the PHP Chinese website for related content!

Related recommendations:

Analysis of the positon attribute of CSS

How to set placeholder through css

The above is the detailed content of Analysis of CSS variables variable. 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