Duda sobre variables css | Layouts Responsivos: Trabajando con layouts mobile

Hola Eduardo, si se puede lograr pero debe tener en cuenta lo siguiente:

Las variables CSS funcionan como cualquier otra propiedad CSS. Deben declararse en el padre del elemento de destino. Así que normalmente se declararía en el elemento de nivel superior html o root:.

No importa si las propiedades CSS personalizadas se declaran en un archivo CSS externo o en el mismo archivo.

Supongamos:

Este es el archivo variables.css

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
}

y este es el archivo styles.css

.red {
    background-color: var(--red);
}
.green {
    background-color: var(--green);
}
.blue {
    background-color: var(--blue);
}

el html quedaría algo así en las referencias:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="customproperty/variables.css" rel="stylesheet">
        <link href="customproperty/style.css" rel="stylesheet">
        <style>
            .module {
                --red: #800;
                --green: #080;
                --blue: #008;
            }
        </style>
    </head>
    <body>
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
        <div class="module">
            <div class="red">red in module</div>
            <div class="green">green in module</div>
            <div class="blue">blue in module</div>
        <div>
    </body>
</html>

Saludos.