Previous words
All along, there is no variable in CSS, to use CSS variables, only with SASS or less such as the pre-compiler. After the new draft is published, it is no longer a fantasy to define and use variables directly in CSS. This article will detail the CSS variables variable
Basic usage
A CSS variable is an entity defined by a CSS author that contains specific values that you want to reuse throughout your document. Use a custom property to set the variable name and use a specific VAR () to access
Compatibility: Mobile is incompatible with IE browser
"Declaring variables"
The variable must -- begin with. For example--example-variable:20px, meaning to assign 20px to the--example-varibale variable
You can place statements that declare variables inside any element, and if you want to set global variables, you can set to: root, body, or HTML
: root{ --bgcolor: #000;}A variable declaration is like changing a Normal style declaration statement, or you can use inline styles
<body style= "--bgcolor: #000" >
A variable declaration statement must contain an element and cannot be placed arbitrarily
Error <style>--bgcolor: #000;</style>
"Use variables"
Use the Var () function as a variable and can be used anywhere. For example, VAR (--example-variable) returns 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 that sets the default value, which is used when the variable cannot get the value.
<body> <p style= "Width:100px;height:100px;background-color:var (--bgcolor,pink)" ></p> </body>
Inheritance and cascading
As with Normal style properties, variable properties also support inheritance and cascading. In the following example, the variable value of the BODY element for the green,p element is red; Based on the principle of stacking, the background color of the final P element is red
<body style= "--bgcolor:green;" > <p style= "Width:100px;height:100px;--bgcolor:red;background-color:var (--bgcolor,pink)" ></p > </body>
Combination 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 form, VAR (--color1) var (--color2) is not recognized by the browser, if separated, such as VAR (--color1) var (--color2), it is resolved to # 333, also 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, like Normal style values, can be calculated using Calc In addition to the combination
<style>.box{ --borderwidth:2px; width:100px; height:100px; Background-color:lightblue; Border-left:calc (VAR (--borderwidth) * 2) solid black;} </style><p class= "box" ></p>Js
CSS variables can interact with JS with each other. Note that you can only use the GetPropertyValue () and SetProperty () methods, and you cannot use the Style property
"Style Property"
<p id= "box" style= "--color:lightgreen;background-color:var (--color)" ></p> <script> var oBox = document.getElementById (' box '); Console.log (obox.style['--color '); Undefined</script>"GetPropertyValue ()"
<p id= "box" style= "--color:lightgreen;background-color:var (--color)" ></p> <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" > Change light blue </button><p id= "box" ></p> <script >var OBox = document.getElementById (' box '), var obtn = document.getElementById (' btn '); Obtn.onclick = function () { oBox.style.setProperty ('--color ', ' lightblue ');} </script>Not supported
One thing to pay special attention to is that the variable does not support!important
. box{ --color:red; width:100px; height:100px; Background-color:--color!important;} </style><p class= "box" ></p>Chrome browser is as follows
Use
1. maintainability
Maintaining a color scheme or dimension scheme in a Web page means that some styles appear multiple times in a CSS file and are reused. When modifying a scheme, whether it is adjusting a style or completely modifying the whole scenario, it becomes a complex problem, and simply finding replacements is not enough, and CSS variables come in handy.
: root{ --maincolor: #fc0;}. p1{ Color:var (--maincolor);}. p2{ Color:var (--maincolor);}2, the semantics of
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 the #fc0 in a document, especially when the same color appears in different files.
3, more convenient implementation of @media media query
In general, 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 class= "box" ></p>However, if you use variables, you can refine the code
<style>.box{ --base-size:10px; Width:calc (VAR (--base-size) *); Height:calc (VAR (--base-size) *); 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 whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
