^^Css3 variables. var() function. Custom property.

 

  1. The var() function can be used to insert the value of a custom property.
  2. The variable name must begin with two dashes (--) and is case sensitive!
  3. Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.
  4. var() function e' una delle Css functions
  5. esiste anche un tag_var.  rem: "tag" e' <tag>...</tag>

 

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

:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
--1st-font-size: 20px;
--2nd-font-size: 30px;
--mainFontWeight:bold;
}

The easiest way to manage your CSS vars is by declaring them into the :root pseudo-class. Given the fact that the CSS variables follow the rules like any other CSS definition, having them in the :root will ensure that all selectors will gain access to these variables.

 

div1

 

Gradient Background

 

div3

 

Links

  1. w3schools/css3_variables
  2. developer.mozilla.CSS/var
  3. https://css-tricks.com/difference-between-types-of-css-variables/
  4. https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd
    1. CSS variables can be made conditional with media queries
    2. Don�t be afraid to use CSS variables with the calc() function.