Alex Plaza

UX & Front-end Developer

Ventajas de Usar un Preprocesador - Segunda Parte

Lo prometido es deuda

Después de sufrir con compartir snippets de código a través de tumblr, decidí pasarme a Jekyll(ya les contaré más sobre eso). Pero lo importante es que estoy de vuelta con más Sass tips. Let’s get started!

Ventaja número 3: Variables

En Sass tenemos la posibilidad de usar variables, si nunca has trabajado con variables antes te van a encantar. La definición matemática de variable puede ser un poco confusa para alguien que se dedica solo al diseño, pero imagina una variable como un símbolo que contiene un valor. Para obtener ese símbolo lo debes declarar primero(darle un nombre y darle un valor). Pero una vez declarado puedes repetirlo cuantas veces quieras en tu código y siempre va a representar el valor que le declaraste. Si algún momento necesitas que ese valor cambie, basta con que vuelvas a la declaración inicial y cambies ese valor para que ese cambio se vea reflejado en todas las instancias donde pusiste tu variable(símbolo).

¿Suena complicado? Nah, vamos a ver un ejemplo. Un excelente caso donde aplicar variables en CSS es con los colores, nadie quiere memorizarse los valores Hexagecimales de una marca, ni cambiar ese #VAL00R 200 veces en el código uno a uno porque al Cliente se le ocurrió que ya no le gustaba el color.

Entonces hay que usar variables

$color-marca: #EE9C33; // Declaración de la variable

.navigation, .buttons {
    background-color: $color-marca;
    color: white;
}

.footer {
    background-color: grey;
    color: #333;
    border-bottom: 3px solid $color-marca;
}

Cada vez que llames a la variable $color-marca se imprimirá el valor que le asignaste antes, en este caso #EE9C33. Como ven no es para nada complejo y es de mucha ayuda cuando tienes que mantener miles de líneas de código.

Ventaja 4: Funciones Sass

Si bien puedes crear tus propias funciones con Sass, existen muchas pre-contruidas y que solo están esperando que las invoquemos para seguir sacándole ventaja a Sass por sobre CSS. Vamos a aprovechar el mismo ejemplo anterior de los colores, para ver como podemos aplicar el poder de las Sass Functions para mejorar el diseño.

// Declaración de variables: Colores marca
$color-marca: #EE9C33;
// Color complemento de nuestra marca
$complemento-marca: #3EE374;

.navigation {
    a {
      background: $color-marca;
      &:hover, &:focus {
        background: lighten($color-marca, 6%)
      }
    }
}

.button {
    background-color: darken($complemento-marca, 12%);
    color: white;
    &:hover, &:focus {
        background-color: darken($complemento-marca, 8%);
    }
}

footer {
    background-color: $color-marca;
    color: white;
}

// Ese último footer con el copyright
.sub-footer {
  background-color: darken($color-marca, 20%);
  color: white;
}

Bien, vamos a ver que pasó aquí. Primero usamos la función lighten que ya por su nombre es bastante explicativa, esta función se encarga de aclarar un color que le pasemos, y acepta 2 argumentos para ejecutarse: el color que deseamos aclarar y un porcentaje para indicarle cuánto queremos aclarar ese color del 1 al 100.

Luego, hicimos uso de la función darken y como es de esperarse hace exactamente lo contrario a la función lighten, también acepta 2 argumentos y sirve para oscurecer nuestro color.

Tanto lighten como darken son conocidas por llevar nuestro color al extremo, solo hay que tener cuidado porque con cada una ellas al 100% terminaríamos con un blanco y un negro. Pero para resolver este problema tenemos la función scale-color que puede combinarse con distintos argumentos para servir diversos propósitos de manipulación de color. En nuestro caso puntual para aclarar u oscurecer un color usaríamos $lightness: y le pasaríamos nuestro porcentaje de la siguiente manera scale-color($color-marca, $lightness: 10%) para aclarar, y para oscurecer es lo mismo pero con el porcentaje expresado de forma negativa -10%. Les dejo un link de las Sass Functions para que puedan explorar más a fondo cada una de ellas. Hay mucho más en las Sass Functions que solo manipulación de color. Y ya usaremos otras en próximos posts.

Un último detalle con las funciones Sass! Para nuestro ejemplo de código anterior utilizamos un color para complementar nuestra marca(de naranja) en duro. Pero con Sass podríamos hacerlo dinámico y totalmente dependiente de nuestro color de marca. Veamos.

$complemento-marca: desaturate(adjust-hue($color-marca, 106), 10%);

Listo! aquí usamos 2 funciones en la misma declaración de color, primero ajustamos el matiz del color con adjust-hue que recibe un número por los grados(no un porcentaje) y luego la desaturé un poco con desaturate para que no tuviéramos un verde que nos hiciera sangrar los ojos. He creado un lindo Codepen para que revises este ejemplo Sass con preview incluída y lo compiles en vivo. Trata cambiando la primera variable $color-marca por blue y obtendrás un tema de fiestas patrias(algo que se dio por casualidad, nada intencional). Pero visita el link y pon el color que quieras. Juega con Sass y Codepen(una increíble herramienta mientras no haga mi tutorial introductorio de como usar Sass de forma local en tu equipo).

Listo, eso es todo por esta vez y la próxima se pondrá un poquito más interesante porque revisaremos otras funciones de Sass que te volarán el cerebro. Dejen sus dudas en los comentarios.

comments powered by Disqus