+ 1

I cant understand the CSS var() function....how does it work...anyone pls??

Css

2nd Sep 2019, 10:55 PM

chemobrainz

3 Answers

+ 6

You start by defining the :root, when you do so, you use the var() to call the classes you've already defined. An example has been given by Mirage 🌹

3rd Sep 2019, 8:28 AM

Oma

+ 3

The var() function can be used to insert the value of a custom property. The variable name must begin with two dashes (--) and is case sensitive! The syntax of the var() function is as follows: var(custom-name, value) custom-name (Required) --> The custom property's name (must start with two dashes) value (Optional) --> The fallback value (used if the custom property is invalid) The following example first defines a global custom property named "--main-bg-color", then it uses the var() function to insert the value of the custom property later in the style sheet: <html> <head> <style> :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); padding: 5px; } #div2 { background-color: var(--main-bg-color); padding: 5px; } #div3 { background-color: var(--main-bg-color); padding: 5px; } </style> </head> <body> <div id="div1">test</div> <br> <div id="div2">test</div> <div id="div3"></div> </body> </html> source: https://www.w3schools.com/css/css3_variables.asp

3rd Sep 2019, 1:27 AM

Ahlin Chan