Stylus: Usando variables y mixins

En el post anterior hemos dado una primera introducción acerca de las características mas importantes de Stylus y como poder compilar nuestros archivos, en este nuevo post haremos hincapié en el uso tanto  de variables como de mixins y de como estos nos evitan tener que duplicar código en nuestro archivo de estilos.

Variables

Las variables nos permiten, al igual que en los lenguajes de programación, asignarle uno o varios valores que podrán ser reutilizados a lo largo del archivo teniendo asi de manera centralizada ciertos valores y evitando tener que modificar en varios lugares del archivo.

Stylus CSS
white = #FFFFFF

label

color white

label {

color: #FFFFFF;

}

Otra cosa que podemos hacer es hacer referencia a una variable dentro de otra, por ejemplo:

Stylus CSS
font-size = 14px

full-font = font-size “Lucida Grande”, Arial

label

font full-font

label {

font: 14px “Lucida Grande”, Arial;

}

Alcance (scope)

Algo a tener en cuenta cuando se usan variables dentro de lo que es Stylus es el scope (alcance) de las mismas, puntualmente se debe tener en cuenta dos cosas:

  • Al crear una variable dentro de una clase, la misma es solo visible dentro de la misma y no en otras dentro del archivo
Stylus CSS
custom-color = #AFFFFF

body

custom-color-new = #FFFFFF

color custom-color-new

label

color custom-color

body {

color: #fff;

}

label {

color: #afffff;

}

  • Al modificar el valor de una variable dentro de una clase no afecta al resto de las clases que usen esa variable-
Stylus CSS
custom-color = #AFFFFF

body

custom-color= #FFFFFF

color custom-color

label

color custom-color

body {

color: #fff;

}

label {

color: #afffff;

}

Interpolacion (interpolation)

La interpolacion es la posibilidad de cambiar dinamicamente el nombre de un atributo por medio de una variable, quiere decir que las variables pueden ser utilizadas tanto para darle valor a un atributo como para indicar el nombre del mismo. La forma de hacerlo es colocando dichas variables entre llaves {}.

Stylus CSS
color-attribute = color

label

{color-attribute} #FFFFFF

label {

color: #FFFFFF;

}

Operadores

Las variables soportan el uso de operadores lógicos en cualquiera de las variables pero mas comúnmente se utilizan en los números, cadenas y colores. Algunos de los operadores disponibles son:

El detalle de cada uno de los mismos lo pueden encontrar en este link.

Mixins

Los mixins son bloques de codigo que poseen uno o mas atributos definidos en su interior y que cuentan con la posibilidad de recibir argumentos, los cuales pueden modificar el comportamiento de este bloque. Vale la pena decir que estos mixins se pueden referenciar o invocar desde otras clases como si fueran un atributo mas.

Stylus CSS
border-radius()

-webkit-border-radius 10px

-moz-border-radius 10px

border-radius 10px

label

border-radius()

label {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

Mixins parametricos

Modifiquemos el código del ejemplo anterior para pasarle argumentos y en función de ellos cambiarle el comportamiento al estilo:

Stylus CSS
border-radius(radius)

-webkit-border-radius radius

-moz-border-radius radius

border-radius radius

label

border-radius(10px)

label {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

Ahora bien puede suceder que a la hora de pasarle los valores al mixins nos olvidemos de pasarla la cantidad correcta o directamente no le pasemos ninguno, para evitar este tipo de problemas es que podemos asignarle valores por default a cada uno de los argumentos los cuales en caso de no ser informados serán los que tomara cada uno de los argumentos.

Stylus CSS
border-radius(radius= 10px)

-webkit-border-radius radius

-moz-border-radius radius

border-radius radius

label

border-radius()

label {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

Conclusiones

Hemos visto las ventajas que nos provee la reutilizacion de codigo ya se por medio del uso de variables como de los mixins, permitiendonos centrarnos solo en lo realmente necesario y facilitando el hacer que nuestro codigo se adapte a los cambios

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *