¿Qué tal muchachos? seguimos con los tutoriales de Stylus de la mano de SublimeText2. Ahora vamos a aprender a crear variables que nos ahorrarán mucho tiempo a la hora de codear.
¿Qué es una variable?
Una variable es un símbolo o texto, que toma un valor ya sean numéricos o de texto.
Creando una Variable en Stylus
Vamos a crear un par de ejemplos para explicar el uso de las variables:
Ejemplo 1:
Entramos a nuestro archivo .styl (estilo.styl en el tutorial) y creamos nuestra primera variable llamada “color_azul” la cual tendrá como valor el código hexadecimal del color azul “#0000FF”, de la siguiente manera:
color_azul = #0000FF
Con eso hemos creado la variable y asignado un valor, ahora podremos usar esa variable, por ejemplo tenemos una clase llamada “container” y queremos darle un fondo azul (el del código hexadecimal), hacemos lo siguiente:
.container
background color_azul
Con eso ya tenemos nuestro background de color azul, ¿porqué? pues fácil, Stylus al momento de compilar el código CSS, exporta el valor de la variable y no el nombre de la variable como tal, por lo tanto en el archivo estilo.css está con el código hexadecimal.
Ejemplo 2:
Supongamos que queremos almacenar en una variable un tipo de fuente “font-size “Lucida Grande”, Arial” entonces creamos la variable “fuentita”:
fuentita = “Lucida Grande”, Arial
Y asignamos ese tipo de fuente a nuestra clase “container”, de la siguiente forma:
.container
font fuentita
Esto nos devolverá el siguiente comando en el archivo css:
.container
font: “Lucida Grande”,Arial sans-serif
Ejemplo 3:
Podemos insertar variables dentro de otras variables, vamos a usar el ejemplo anterior y vamos agregar la variable “tamano-fuentita” (stylus no reconoce las “ñ” mucho cuidado con eso) con el valor de “16px” y esta variable la insertaremos en la variable “fuentita”, quedando de la siguiente manera:
tamano-fuentita = 14px
fuentita = tamano-fuentita “Lucida Grande”, Arial
Y no necesitamos modificar nada en la clase, porque la clase esta con la variable “fuentita” y la variable fuentita tiene dentro la variable “tamano-fuentita”.
Si se sienten más comodos escribiendo las variables con el signo de dolar ($), lo pueden hacer sin ningún problema, stylus lo reconocerá igual. Ejm: $fuentita, $tamano-fuentita.
Les dejo una imagen de una declaración de variables sencilla para un caso de colores:
Es todo por ahora pero ya vendré con más tutoriales para ustedes, chaooo!
