CSS Frontend

Variables CSS

En CSS es posible generar variables que nos permitan utilizar esos valores para diferentes usos en nuestros documentos de estilos. Si guardamos un valor, estamos evitando repetir código, lo que trae beneficios a la hora de mantener el código y el rendimiento de carga.

Sintaxis para generar variables en CSS

:root {    --primary-color: black;}

Luego, invocamos la variable en el elemento donde se necesite.

Ejemplo

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Variables</title>    <style>        :root{            --primary-color: #003476;            --secundary-color: royalblue;            --header-size: 4rem;            --font: 1.8rem;        }        *{            box-sizing: border-box;            margin: 0;            padding: 0;        }        html{            font-size: 62.5%;        }        body{            font-size: 1.6rem;        }        header{            width: 100vw;            height: 15vh;            background-color: var(--primary-color);        }        main {            width: 100vw;            height: 70vh;            font-size: var(--font);        }        h1 {            font-size: var(--header-size);            color: var(--primary-color);        }        footer{            width: 100vw;            height: 15vh;            background-color: var(--secundary-color);        }    </style></head><body>    <header></header>    <section>        <main>            <h1>Soy un título de ejemplo</h1>            <section>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora dicta earum dignissimos voluptatum totam eius assumenda dolorem, deserunt nulla corporis itaque aliquam minus, libero asperiores sint, explicabo quis consequuntur.</p>            </section>        </main>     </section>    <footer></footer></body></html>

Dentro de la declaración CSS :root{}, colocamos las variables que vamos a utilizar en el documento entero. Recordemos que “root” hace referencia al elemento raíz de la página web, es decir al html.

Avatar

esteban

About Author

Quizá también te interese

Frontend HTML

Qué es HTML

HTML es el lenguaje de etiquetas para estructurar páginas web. Existen otras tecnologías como CSS y Javascript que complementan la
Frontend

Qué es Frontend

El Frontend son el conjunto de componentes de una página o aplicación web que se visualizan y funcionan a través