CSS
Propiedades personalizadas (variables)

Introducción

Sintaxis

• : pseudo-clase raíz {} / * que permite una definición más global de las variables * /
• --nombre-variable: valor ; / * Definir variable * /
• var (- nombre-variable, valor predeterminado ) / * usa la variable definida con un valor predeterminado de reserva * /

Observaciones

Color variable

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Dimensiones variables

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Cascada variable

Las variables CSS caen en cascada de la misma manera que otras propiedades, y pueden actualizarse de forma segura.

Puede definir variables varias veces y solo la definición con la mayor especificidad se aplicará al elemento seleccionado.

Asumiendo este HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

Podemos escribir este CSS:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

Y consigue este resultado:

Válido / Inválido

Nombrar Al nombrar las variables CSS, contiene solo letras y guiones al igual que otras propiedades de CSS (por ejemplo: altura de línea, tamaño de caja de mazmorras), pero debe comenzar con guiones dobles (-)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

Las variables CSS distinguen entre mayúsculas y minúsculas.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Espacio Vs vacío

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

Concatenaciones

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Cuidado al usar Unidades

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

Con consultas de medios.

Puede restablecer las variables dentro de las consultas de los medios y hacer que esos nuevos valores aparezcan en cascada donde sea que se usen, algo que no es posible con las variables del preprocesador.

Aquí, una consulta de medios cambia las variables utilizadas para configurar una cuadrícula muy simple:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

Puede intentar cambiar el tamaño de la ventana en esta demostración de CodePen

Aquí hay una captura de pantalla animada del cambio de tamaño en acción: