Introduction to CSS Variables

This information talks about an issue that is not but supported in most browsers. See the browser support part for extra info.

CSS variables give us most of the similar benefits that basic variables supply as much as programming languages: comfort, code-reusability, a extra readable codebase, and improved mistake-proofing.

Instance

:root 
  --base-font-measurement: 16px;
  --hyperlink-shade: #6495ed;


p 
  font-measurement: var( --base-font-measurement );


a 
  font-measurement: var( --base-font-measurement );
  shade: var( --hyperlink-colour );

Fundamentals

There are three principal elements you need to find out about when utilizing CSS variables:

• Customized properties


• var() perform


• :root pseudo-class

Customized Properties

You already find out about the usual CSS properties resembling colour, margin, width, and font-measurement.

The next instance makes use of the colour CSS property:

physique 
  shade: #000000; /* The "colour" CSS property */

A customized property simply signifies that we (the CSS authors) get to outline the property’s identify.

To outline a customized property identify, we have to prefix it with two dashes (--).

If we need to create a customized property with the identify of textual content-colour that has a colour worth of black (#000000 in hex code), that is how we might do it:

:root 
  --textual content-shade: #000000; /* A customized property named "textual content-shade" */

var() Perform

With a purpose to apply our customized properties to our work, we now have to make use of the var() perform, in any other case browsers will not know what they’re for.

If we need to use the worth of our --textual content-colour customized property in our p, h1, and h2 type guidelines, then we have to use the var() perform like this:

:root 
  --textual content-colour: #000000;


p 
  shade: var( --textual content-colour );
  font-measurement: 16px;


h1 
  colour: var( --textual content-colour );
  font-measurement: 42px;


h2 
  colour: var( --textual content-colour );
  font-measurement: 36px;

The instance above is equal to:

p
  colour: #000000;
  font-measurement: 16px;



h1
  colour: #000000;
  font-measurement:



The post Introduction to CSS Variables appeared first on DICKLEUNG DESIGN 2014.