Las Variables de SCSS Color

Mientras SCSS trae un montón de opciones de gran alcance a la vainilla CSS, las variables pueden ser uno de los más útiles cuando se trata de mantener la coherencia en todo el diseño de su web. Configuración de variables de color hace que sea fácil de reutilizar colores como usted prototipo y construir su sitio web, sin la molestia de recordar todos los códigos de color o HTML Hex nombre de un solo color.

Configuración de las variables de color SCSS

Si usted no está familiarizado con las variables en SCSS echa un vistazo a esta guía para obtener una visión general rápida (pero la verdad son bastante sencillo). Variables en SCSS se prefijan con un signo '$' y se pueden nombrar lo que quiera. Aquí vamos a establecer algunas variables básicas de color que se utilizará más adelante en nuestras hojas de estilo. 

SCSS

$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;

Recuerde, con el fin de utilizar variables, o cualquiera de los beneficios de SCSS para el caso, la hoja de estilo debe tener la extensión '.scss', y un preprocesador debe ser parte de su sistema de construcción sitio web. Para obtener más información sobre cómo empezar, echa un vistazo a cómo instalar Sass.

Uso de variables SCSS en tus hojas de estilo

Ahora que hemos definido algunas variables de color, es el momento de ponerlos a trabajar. Puede utilizar variables SCSS como lo haría con los valores normales para cualquier propiedad CSS, sólo asegúrese de incluir el prefijo señal de que el '$' para indicar el estado variable. 

SCSS

h1 { color: $color-red; }
p { color: $color-green; }
a { color: $color-blue; }

Esta CSS salida de voluntad con lo que definió inicialmente como valor de la variable, en nuestro ejemplo, la salida se verá así: 

CSS

h1 { color: #FF0000; }
p { color: #00FF00; }
a { color: #0000FF; }
Demo en CodePen

Variables SCSS son muy poderosos, y hay muchas cosas que se pueden hacer con ellos más allá del color. Trate de usarlos para estilos de fuente y las familias, los diferentes puntos de interrupción o tiempos de transición. ¡Enloquecer!