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

[nota:333e27f716]Pueden ver para que sirve cada opción en el tutorial anterior[/nota:333e27f716]

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.

[css:1:333e27f716]// Sintaxis clásica
.cristalab {
background: red;
}[/css:1:333e27f716]

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.

[css:1:333e27f716]
//Sintaxis de Stylus
.cristalab
background red[/css:1:333e27f716]

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.

[css:1:333e27f716]//Los dos tendrán background red
.segundoselector
.cristalab
background red[/css:1:333e27f716]

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:

[css:1:333e27f716].selectortres,.segundoselector
.cristalab
background red[/css:1:333e27f716]

Selectores Padres

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

[css:1:333e27f716].cristalab
background red

&:hover
background blue[/css:1:333e27f716]

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.

[css:1:333e27f716].cristalab
background red

/.clasedos
background blue[/css:1:333e27f716]

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:

[css:1:333e27f716].cristalab
background nombrevariable[/css:1:333e27f716]

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:

[css:1:333e27f716].cristalab
font letra sans-serif[/css:1:333e27f716]

Como resultado en nuestro CSS tendremos:
[css:1:333e27f716].cristalab{font:14px "Lucida Grande",Arial sans-serif}[/css:1:333e27f716]

[nota:333e27f716]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”.[/nota:333e27f716]

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
[css:1:333e27f716].cristalab
margin: margin-cristalab + 3px[/css:1:333e27f716]

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

Otro ejemplo:
[css:1:333e27f716].cristalab
margin: margin-cristalab * 3px[/css:1:333e27f716]

Resultado:
[css:1:333e27f716]margin: 15px[/css:1:333e27f716]

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í:

[css:1:333e27f716]margin: (margin-cristalab / 1px)[/css:1:333e27f716]

Resultado:
[css:1:333e27f716]margin: 5px[/css:1:333e27f716]

Podemos usar potencias o exponentes también, con ayuda de dos asteriscos seguidos:
[css:1:333e27f716]margin: margin-cristalab ** 2[/css:1:333e27f716]

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:

[css:1:333e27f716].cristalab
margin: 1..5[/css:1:333e27f716]

Y el resultado sería:
[css:1:333e27f716].cristalab{margin:1 2 3 4 5}[/css:1:333e27f716]

[nota:333e27f716]Si ponemos tres puntos y no dos, el resultado omitirá el último número del rango, en el ejemplo sería el 5.[/nota:333e27f716]

Mixins

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

Creamos el mixin:
[css:1:333e27f716]
mymixins(var)
-webkit-border-radius var
-moz-border-radius var
border-radius var
.cristalab
mymixins 5px[/css:1:333e27f716]

Y el resultado sería:
[css:1:333e27f716].cristalab {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}[/css:1:333e27f716]

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:

[css:1:333e27f716]/* 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[/css:1:333e27f716]

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:

[css:1:333e27f716]// 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)
[/css:1:333e27f716]
[nota:333e27f716]Stylus es tan inteligente que si nos olvidamos de poner “px” a uno de los valores no hay problema, stylus sabrá que hacer ;)[/nota:333e27f716]

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
[css:1:333e27f716]mymixins(var)
-webkit-box-shadow var
-moz-box-shadow var
box-shadow var

.cristalab
mymixins 1px 2px 5px #eee[/css:1:333e27f716]

Resultado:

[css:1:333e27f716].cristalab {
-webkit-box-shadow: 1px;
-moz-box-shadow: 1px;
box-shadow: 1px;
}[/css:1:333e27f716]

Parámetro de Descanso:
[css:1:333e27f716]mymixins(var…)
-webkit-box-shadow var
-moz-box-shadow var
box-shadow var

.cristalab
mymixins 1px 2px 5px #eee[/css:1:333e27f716]

Resultado:
[css:1:333e27f716].cristalab {
-webkit-box-shadow: 1px 2px 5px #eee;
-moz-box-shadow: 1px 2px 5px #eee;
box-shadow: 1px 2px 5px #eee;
}[/css:1:333e27f716]

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://ift.tt/15vEUPb

Enviar comentario

via Cristalab http://ift.tt/1qvPNqY

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: