Comunidad de diseño web y desarrollo en internet online

Stylus: sintaxis, variables, mixins y funciones

En el tutorial anterior hablamos sobre como instalar Stylus, y sus herramientas necesarias para tener una excelente experiencia a la hora de crear nuestro código CSS, ahora, en este tutorial, vamos a aprender cómo funciona Stylus.



Antes de comenzar primero tenemos que ejecutar Stylus, así que hacemos lo siguiente:

Crearemos un archivo llamadao style.styl, abrimos la terminal de Windows y nos movemos al directorio en donde está nuestro archivo style.styl, supongamos que hemos instalado xampp así que lo tendremos en C:\xampp\htdocs:

Código :

//En la terminal de Windows escribimos:
cp C:\xampp\htdocs


Ahora ejecutamos Stylus:

Código :

stylus –w –c style.styl

Pueden ver para que sirve cada opción en el tutorial anterior


Luego vamos a abrir nuestro style.styl y cambiaremos la forma en que se visualiza la sintaxis, vamos al menú de la cabecera de SublimeText:
View -> Syntax -> Stylus

Sintaxis de Stylus


La sintaxis de stylus es muy corta y eficiente, esto lo podemos traducir en ahorro de tiempo al codear. Veamos un ejemplo:

Si queremos crear una clase llamada “cristalab”, la cual tendrá un background red, tendremos que escribir la clase y agregar las llaves de apertura y cierre donde estarán la propiedad background y el valor red.

Código :

// Sintaxis clásica
.cristalab {
   background: red;
}


Con Stylus podemos ahorrarnos de escribir las llaves, los dos puntos y el punto y coma, basta solo con escribir el selector (un selector puede ser una clase, ID o etiqueta, en este caso la clase cristalab) y saltar a la siguiente línea. En la siguiente línea deberemos dar sangría presionando la tecla “tab” y escribimos la propiedad y el valor.

Código :

//Sintaxis de Stylus
.cristalab
   background red


Al hacer eso Stylus entiende que se ha creado una clase (por el punto en cristalab) y que lo que está por debajo (siguiente línea) y con sangría (tecla tab) son los parámetros de la clase, por lo tanto esos parámetros los encierra entre llaves.

En los parámetros, Stylus entiende que la primera palabra es la propiedad y la segunda palabra (separada por un espacio) es el valor de la propiedad, por lo tanto agrega los dos puntos y el punto y coma para cerrar.

Hasta acá solo hemos ahorrado 1 o 2 segundos, pero cuando estemos codeando un sitio web entero sí que ahorraremos tiempo.

  • Si no identamos, Stylus tomará la palabra de la línea de abajo como una etiqueta, en este caso sería la etiqueta background. Así que siempre debemos identar los parámetros de cada selector.

  • Debemos tener en cuenta que cada clase debe tener por lo menos una propiedad y valor, de lo contrario Stylus no lo compilará a CSS.


Si lo deseamos también podemos escribir el código de forma clásica en Stylus y lo compilará correctamente, o podemos agregar solo las llaves, o solo los dos puntos o el punto y coma, el resultado será el mismo.

Lo que hemos hecho se compilará en el archivo CSS con las llaves, los dos puntos y el punto y coma final, además de escribirlo en una sola línea de código porque se lo pedimos en la terminal al escribir la opción “-w”. Esto hará que nuestro archivo CSS reduzca su peso ya que sería un archivo minificado.

Compartiendo parámetros


Otro de los grandes beneficios de stylus es que podemos asignar las mismas propiedades y valores a varios selectores en menos de un segundo. Basta con crear nuestro primer selector con las propiedades y valores a agregar y una línea arriba de donde está escrito nuestro selector agregamos el segundo selector, y agregamos el tercero, el cuarto, etc.

Código :

//Los dos tendrán background red
.segundoselector
.cristalab
   background red


Maravilloso, ¿verdad?, ya no tenemos que estar haciendo copy/paste.

También lo podemos hacer en una misma línea, simplemente separando los elementos por coma o podemos combinar las dos formas:

Código :

.selectortres,.segundoselector
.cristalab
   background red


Selectores Padres


Podemos agregar un pseudo-selector como “hover” por ejemplo sin escribir todo el selector nuevamente, basta con agregar el signo “&”.

Código :

.cristalab
   background red

   &:hover
      background blue


El signo “&” copiará el nombre del selector padre, es decir el que está inmediatamente arriba de él, en este caso el selector es la clase .cristalab, por lo tanto el signo “&” trabajará como ese selector y solo hemos agregado el pseudo-selector.

Selector Root


Llega un momento en el que hemos indentado tanto por las muchas clases y subclases que tenemos, que si queremos crear un nuevo selector, que sea uno general (no un selector que esté dentro de otro), por ejemplo “footer”, sin necesidad de volver al primer carácter de la siguiente línea, solo debemos escribir “/” seguido del selector.

Código :

.cristalab
   background red

   /.clasedos
      background blue


Esto nos creará un selector root que NO tendrá otros selectores padres.

Variables en Stylus


Las variables son una de las mejores cosas que tiene Stylus, podemos crear variables en CSS ¡SÍ!
Para crear una variable solo tenemos que escribir:

Código :

nombrevariable = red


Hemos creado la variable llamada “nombrevariable” y asignado el valor “red”. Esta variable la podemos usar para todo aquello donde coloquemos el color red. Recuerden escribirla siempre arriba de todo el documento.
Por ejemplo, vamos a agregar un background red a la clase .cristalab:

Código :

.cristalab
   background nombrevariable


Como vieron, en vez del color red, escribimos el nombre de la variable, pero eso no es lo maravilloso, lo maravilloso es que si tenemos muchas propiedades con el valor “nombrevariable” y queremos hacer un cambio, no tenemos que modificar uno por uno.

Por ejemplo si ya no queremos el color red, ahora queremos que sea azul y que se modifique en todos partes donde hayamos escrito la variable, solo tenemos que modificar en la variable el color red por blue, y así se cambiará en todos.

Código :

nombrevariable  = blue


Vieron que esto nos ayuda muchísimo. Pero no queda allí, podemos combinar variables. Por ejemplo:

Código :

fuente = 14px
letra = fuente "Lucida Grande", Arial


Como ven hemos creado dos variables, la primera tiene un valor de 14px y la segunda un valor de un Font-family a la cual se le agrega la primera variable. Creamos nuestro selector y escribimos:

Código :

.cristalab
   font letra sans-serif


Como resultado en nuestro CSS tendremos:

Código :

.cristalab{font:14px "Lucida Grande",Arial sans-serif}


Nuestra variable también puede comenzar con el típico signo de variable de los lenguajes de programación “$” “$variable” y lo llamamos escribiendo lo mismo “$variable”.


Operadores


Operadores Matemáticos

Stylus nos da la posibilidad de poder usar los operadores matemáticos para crear nuestro código CSS.

Por ejemplo, tenemos la varible “margin-cristalab” con un valor de 5px y queremos darle a nuestra clase “.cristalab” un margin de 8px, esto lo podemos hacer de la siguiente manera:

//definimos la variable, siempre arriba de todo el documento
margin-cristalab = 5px

//Creamos el selector

Código :

.cristalab
   margin: margin-cristalab  + 3px


Stylus sumará el valor de margin-cristalab + 3px, lo que dará un resultado de 8px.

Otro ejemplo:

Código :

.cristalab
   margin: margin-cristalab  * 3px


Resultado:

Código :

margin: 15px


En el caso de la división debemos de encerrar la operación entre paréntesis o el signo divisor será tomado como texto normal. Debemos de hacerlo así:

Código :

margin: (margin-cristalab / 1px)


Resultado:

Código :

margin: 5px


Podemos usar potencias o exponentes también, con ayuda de dos asteriscos seguidos:

Código :

margin: margin-cristalab ** 2


Eso indica que el valor al cuadrado, si hubiese el número tres sería, el valor al cubo, etc.

Operadores de Rango

Podemos establecer rangos con Stylus (aunque aún no le he encontrado una forma de ser útil). Si queremos darle a una propiedad un valor de un rango numérico podemos hacerlo, simplemente escribimos:

Código :

.cristalab
   margin: 1..5


Y el resultado sería:

Código :

.cristalab{margin:1 2 3 4 5}


Si ponemos tres puntos y no dos, el resultado omitirá el último número del rango, en el ejemplo sería el 5.


Mixins


Los mixins son similares a las funciones y nos da la posibilidad de volver a utilizar fragmentos de código.

Creamos el mixin:

Código :

mymixins(var)
   -webkit-border-radius var
   -moz-border-radius var
   border-radius var
.cristalab
   mymixins 5px


Y el resultado sería:

Código :

.cristalab {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}


Hemos creado el mixin llamado “mymixins” con una variable llamada “var”, luego en las siguientes líneas hemos puesto los parámetros que queremos que compilen dentro de la clase “.cristalab” y el nombre de la variable “var”. Abajo hemos creado la variable “cristalab” con el mixin como propiedad y 5px como valor, ese valor se le pasará a la variable “var” y la propiedad que es el mixin tendrá cada uno de los parámetros ingresados.

Renderizar Mixins

Podemos usar un mixin como parte de otros mixins por ejemplo:

Código :

/* Creamos el mixin redondeado con una variable “x” */
redondeado(x)
   // El valor de la variable “x” pasará a la propiedad margin-left
   margin-left x

/* Creamos otro mixin con una variable */
segundomixin(y)
   /* Llamamos al mixin redondeado, recuerden que este mixin tiene una variable que tenemos que darle un valor, por lo tanto vamos a pasar el valor de la variable “y” del segundo mixin, por eso pongo "y" y no "x" para pasarle la varible */
   redondeado(y) 
      float left

/* Creamos una clase */
.marco
/* asignamos un parámetro, propiedad y valor */
   segundomixin 5px


Se preguntarán porqué al segundo mixin le dí otra variable y se la coloqué al primer mixin (dentro del segundo mixin). Es sencillo, en la clase se está llamando al segundo mixin, y se le está dando el valor de 5px a la variable “y”, como el primer mixin tiene una variable sin valor, entonces debemos de compartir ese valor de la variable “y” con el segundo mixin, por ello se coloca la variable “y” en el primer mixin que está dentro del segundo mixin.

Si quieren hacerlo menos complicado a todas las variables ponganle el mismo nombre y listo ;)

Funciones con Stylus


Otra maravillosa utilidad de stylus es que podemos usar funciones, sí mismo PHP, Python u otro lenguaje de programación, esto es genial!

Por ejemplo vamos a crear una función con dos variables, que nos sume esas dos variables y el resultado lo coloque como valor a una propiedad de nuestra clase:

Código :

// Creamos la función freddier con dos variables, a y b
freddier(a, b)
   // Codeamos lo que queremos hacer, sumar a con b
   a + b

body 
   // A la propiedad padding le vamos a pasar la función y agregamos los valores
   padding freddier(10px, 5)

Stylus es tan inteligente que si nos olvidamos de poner “px” a uno de los valores no hay problema, stylus sabrá que hacer ;)


Parámetros de descanso


Los parámetros de descanso funcionan igual que los mixins con la diferencia que el valor de una variable puede contener todo lo que pongamos como valor a la propiedad, lo explico mejor.

Mixins

Código :

mymixins(var)
   -webkit-box-shadow var
   -moz-box-shadow var
   box-shadow var

.cristalab
   mymixins 1px 2px 5px #eee


Resultado:

Código :

.cristalab {
  -webkit-box-shadow: 1px;
  -moz-box-shadow: 1px;
  box-shadow: 1px;
}


Parámetro de Descanso:

Código :

mymixins(var...)
   -webkit-box-shadow var
   -moz-box-shadow var
   box-shadow var

.cristalab
   mymixins 1px 2px 5px #eee


Resultado:

Código :

.cristalab {
  -webkit-box-shadow: 1px 2px 5px #eee;
  -moz-box-shadow: 1px 2px 5px #eee;
  box-shadow: 1px 2px 5px #eee;
}


Como ven en el parámetro de descanso la variable tiene todo el valor que se escribió para la propiedad box-shadow, mientras que en el mixin solo el primer texto antes del espacio. Y esto lo logramos simplemente agregando tres puntos (...) a la variable “var”.

Comentarios en Stylus


Los comentarios son los mismos de siempre, // para una línea /* */ para varias líneas, pero lo que debemos dejar en claro es que si usamos la opción de comprensión de Stylus al momento de compilar nuestro código entonces los comentarios de varias líneas no se compilarán, sencillamente no se insertarán en el archivo CSS, pero eso no causará ningún error, es obvio porque se hace eso.

Sin embargo, si queremos tener los comentarios de todas formas, basta con agregar un signo de admiración “!”.

Código :

/*!
  Comentario
 */


@import


Podemos importar otros archivos CSS o .styl a nuestro archivo de Stylus, de la siguiente manera:

Código :

@import('archivo.css')
@import('archivo.styl')


Debemos tener en cuenta que si no colocamos la extensión del archivo, entonces stylus interpretará que la extensión es .styl, por ejemplo:

Código :

@import('archivo')   =  @import('archivo.styl')


Stylus cuenta con muchísimas cosas más avanzadas que no vienen al caso explicarlas ya que rara vez lo usaríamos, de todas formas pueden encontrar toda la documentación de stylus en este enlace:

http://learnboost.github.io/stylus/

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate