CSS Variables

CSS variables are declared using a -- (two minus signs) symbol. They can be placed anywhere in a SCSS file. Variables can be declared to have global scope or a local scope, as shown below:

:root 
{
  --background-color:white;     /* global scope */
}

.warning 
{
  --background-color:red;       /* local scope */
}

The var() function is used to insert the value of a declared CSS variable.

Example using css variables (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            :root
            {
                --text_colour:#ff0000;
                --textshadow_colour:#ffaaaa;
                --textshadow_offset:5px;
            }

            h1,
            p
            {
                color:var(--text_colour);
            }

            h1
            {
                text-shadow:var(--textshadow_colour) var(--textshadow_offset) var(--textshadow_offset);                
            }
        </style>
    </head>

    <body>
        <h1>Header</h1>
        <p>Some paragraph text</p>
    </body>
</html>

Change the code above to use a green set of colours, as shown here.