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
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}
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}
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)
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.
Por Fer el 09 de Junio de 2014
Por DannyFeliz el 09 de Junio de 2014
Por danidhsm el 10 de Junio de 2014
//En la terminal de Windows escribimos:
cp C:\xampp\htdocs
querias decir:
//En la terminal de Windows escribimos:
cd C:\xampp\htdocs
no creo que se equivoque nadie, pero por si acaso ...
Por elporfirio el 10 de Junio de 2014
Por vktor el 18 de Julio de 2014
Por Mateo Olarte el 19 de Septiembre de 2014
Gracias por compartir tu conocimiento.