Home > Developer > JavaScript
CSS variable and cssvariable
Previous
For a long time, CSS has no variables. To use CSS variables, you can only use pre-compilers such as SASS or LESS. After the new draft is published, it is no longer an illusion to define and use variables directly in CSS. This document describes the CSS variable in detail.
Basic usage
CSS variables are entities defined by CSS authors, including 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
[Declare variable]
The variable must start--. For example, -- example-variable: 20px, which means that 20px is assigned to the -- example-varibale variable.
You can place statements that declare variables in any element. To set global variables, you can set them to root, body, or html.
:root{ --bgColor:#000;}
Variable declaration can also use inline styles just like a general style declaration statement.
<Body> // error <style> -- bgColor: #000; </style>
[Use variables]
Use the var () function to use variables and use them anywhere. For example, var (-- example-variable) returns the value of -- example-variable.
<body style="--bgColor:#000;"> <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div> </body>
The var () function also has an optional parameter to set the default value. When the variable cannot obtain the value, the default value is used.
<body> <div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div> </body>
Inheritance and cascade
Like common style attributes, variable attributes also support inheritance and cascade. In the following example, the variable value of the body element is green and the variable value of the div element is red. Based on the stacked principle, the background color of the div element is red.
<body style="--bgColor:green;"> <div style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></div> </body>
Combination and computing
[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><div class="box"></div>
However, CSS variables cannot be combined in the following form. var (-- color1) var (-- color2) is not recognized by the browser. If they are separated, such as var (-- color1) var (-- color2) is 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><div class="box"></div>
Computing]
Variables are the same as normal style values. In addition to combinations, calc can also be used for calculation.
<style>.box{ --borderWidth:2px; width: 100px; height: 100px; background-color:lightblue; border-left: calc(var(--borderWidth) * 2) solid black;}</style><div class="box"></div>
JS
CSS variables can interact with JS. Note that only the getPropertyValue () and setProperty () methods can be used, rather than the style attribute.
[Style attribute]
<div id="box" style="--color:lightgreen;background-color: var(--color)"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.style['--color']); //undefined</script>
[GetPropertyValue ()]
<div id="box" style="--color:lightgreen;background-color: var(--color)"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.style.getPropertyValue('--color'));//'lightgreen'</script>
[SetProperty ()]
<Style> # box {-- color: lightgreen; background-color: var (-- color); width: 100px; height: 100px; display: inline-block ;} </style> <button id = "btn" type = "button"> light blue </button> <div id = "box"> </div> <script> var oBox = document. getElementById ('box'); var oBtn = document. getElementById ('btn '); oBtn. onclick = function () {oBox. style. setProperty ('-- color', 'lightblue');} </script>
Not Supported
Note that variables are not supported! Important
.box{ --color:red; width: 100px; height: 100px; background-color:--color !important;}</style><div class="box"></div>
The chrome browser is as follows:
Purpose
1. maintainability
Maintaining a color scheme or size scheme on the webpage means that some styles appear multiple times in the CSS file and are reused. When you modify a scheme, whether it is to adjust a style or completely modify the entire scheme, it will become a complicated problem, and simply searching and replacing is far from enough, then CSS variables will come in handy.
:root{ --mainColor:#fc0;}.div1{ color:var(--mainColor);}.div2{ color:var(--mainColor);}
2. semantic
The second advantage of a variable is that the name itself contains semantic information. CSS files become easy to read and understand. 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 queries
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><div class="box"></div>
However, if variables are used, the code can be simplified.
<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><div class="box"></div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
