CSS - Lesson 4: Variables | Andros Fenollosa

It is inevitable, and advisable, to keep repeating a series of styles throughout your website. Using the same fonts, colors, sizes, spacings... and other characteristics will give the design its personality. But, of course, that makes it complex to build. Unless you have a hard drive attached to your ear, it will be hard to remember everything all the time. That is why in this tutorial I am going to show you how to use CSS3 variables. A technique that will help you not only to work faster, but also to make development flexible for working with other teammates.

General

To apply variables that are applied to the whole document we must declare them inside :root.

:root {
    --color-amarillo: #ECD078;
    --color-naranja: #D95B43;
    --color-rojo: #C02942;
    --fuente-titulo: "Arial";
}

h1 {
    color: var(--color-naranja);
    font-family: var(--fuente-titulo);
}

It would be equivalent to:

h1 {
    color: #D95B43;
    font-family: 'Arial';
}

Local

If you want the variables to apply only to a specific element, you must declare them inside it.

h1 {
    --color-naranja: #D95B43;
    color: var(--color-naranja);
    border: 2px solid var(--color-naranja);
}

The variable --color-naranja will only apply to h1 elements, and it cannot be used in other elements.

The previous code would be equivalent to:

h1 {
    color: #D95B43;
    border: 2px solid #D95B43;
}

Here is another example where we want an element to be square but also able to be manipulated from a local variable.

.cuadrado {
    --lado: 10rem;
    width: var(--lado);
    height: var(--lado);
    background-color: #D95B43;
}

Configuring from HTML

If you want the user to be able to configure the variables, you can do so from HTML. It is not a common practice, but it can get you out of a jam.

For example, if you want the user to be able to manipulate the padding of an element, you can do it this way:

.titulo {
    padding: var(--separacion);
    text-transform: uppercase;
    color: #D95B43;
}

Now you could modify the --separacion variable from HTML:

<html>
    <body>
        <h1 class="titulo" style="--separacion: 4rem">Hello</h1>
    </body>
</html>

Of course, if you use Sass for your project you would not need to work this way.

Basic variables in a project

To give you an idea of how you can use variables in a project, here is an example I use frequently in my projects.

:root {
    /* Colors */
    --color-black: #000;
    --color-white: #fff;
    --color-primary: ...;
    --color-secondary: ...;

    /* Fonts */
    --font-heading: ...;
    --font-body: ...;

    /* Gaps */
    --gap-s: 0.9rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 3rem;
}

Later on we will use a metalanguage called Sass. Its equivalent would be the following:

//-- Variables
// Colors
$color-black: #000
$color-white: #fff
$color-primary: ...
$color-secondary: ...
// Fonts
$font-heading: ...
$font-body: ...
// Gaps
$gap-s: 0.9rem
$gap-m: 1rem
$gap-l: 1.5rem
$gap-xl: 2rem
$gap-xxl: 3rem

Activity 1

Create an HTML document with a heading and a paragraph that in turn contains some hyperlinks.

Use a variable to define a color that you will apply both to the heading and to the hyperlinks.

Activity 2

Create a rectangle whose width is twice its height. Use a local variable to define the height.