Stylus: Preprocesador CSS

Stay hungry, stay foolish

Steve Jobs

Stylus es un preprocesador  CSS que permite escribir código CSS de forma más organizada, rápida y eficiente. En este post vamos a ver cuales son las características principales de este preprocesador y la forma en la que podemos empezar a trabajar con él.

INSTALACIÓN

La instalación de stylus es muy sencilla pero debemos tener instalado previamente node.js, si no tienes node revisa el siguiente post: Node.js: Instalación y primer ejemplo donde se explica como instalarlo.

Abre una ventana de simbolo del sistema o una terminal y ejecuta el siguiente comando

npm install stylus -g

Listo ya tienes stylus instalado.

Compilar un archivo

Para compilar un archivo de stylus (*.styl) y que nos genere el código CSS correspondiente solo tienes que abrir una terminal, colocarte en la carpeta donde se sitúa tu archivo y ejecutar el comando stylus seguido del nombre del archivo


stylus estilo.styl

Si no tienes ningún error te debe indicar que el archivo se compiló y si abres la carpeta debes ver el archivo CSS

Ahora pasamos a ver como trabaja stylus

SINTAXIS

OMITIR LLAVES, DOS PUNTOS Y PUNTO Y COMA

Stylus nos permite omitir las llaves, los dos puntos y el punto y coma para definir una regla CSS, la forma en la que stylus identifica donde empieza y termina una regla es por la indentación que se le debe dar al codigo.

Stylus

body
    background rgb(70,70,70)
    margin 0
    padding 0
    font-size 15px

h1, h2, h3, h4, h5, h6
    color #aaaaaa
    text-transform uppercase

p span, div #hola
    background red

Código CSS

body {
  background: #464646;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
  color: #aaa;
  text-transform: uppercase;
}
p span, div #hola {
  background: #f00;
}

VARIABLES

Con Stylus podemos crear variables para utilizarlas dentro de nuestra hoja de estilos, lo que tenemos que hacer  para crear una variable es escribir el nombre y asignarle un valor ( variable = valor ), también se puede utilizar las propiedades como variables anteponiendo el signo arroba por ejemplo  @width hace referencia al valor de la propiedad ancho

Stylus
/* Asignacion de variables */
color1 = #123456
color2 = #987654
color3 = #765432
ancho = 980px
tamanio-fuente = 15px

/* Utilización de las variables */
body
	background color1
	font-size tamanio-fuente

.contenido
	width ancho
	background color2
	margin ancho
	border solid color3 2px</pre>
.cuadro
    width 150px
    height @width
Código CSS
body {
    background: #123456;
    font-size: 15px;
}
.contenido {
    width: 980px;
    background: #987654;
    margin: 0;
    border: solid #765432 2px;
}
.cuadro {
    width: 150px;
    height: 150px;
}

Mixins

Los mixins son parecidos a las funciones y nos permiten reutilizar fragmentos de código

Stylus
/* Se crea el mixin con un argumento*/
redondeado(x)
	-webkit-border-radius x
	-moz-border-radius x
	border-radius x

/* Se utiliza el mixin dentro de la clase marco*/
.marco
	border solid 1px red
	redondeado 5px

Código CSS
.marco {
    border: solid 1px #f00;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Operadores

Stylus nos ofrece la posibilidad de utilizar operaciones matemáticas

Stylus
color1 = #fffddd

.caja
	width 250px
	margin @width * .1
	padding @margin + 5
	color color1 - #fd9876
Código CSS
.caja {
    width: 250px;
    margin: 25px;
    padding: 30px;
    color: #026567;
}

Funciones

Stylus incluye funciones predefinidas que nos facilitan el trabajo, por ejemplo las que nos permiten hacer variaciones a los colores

Stylus

.caja
	background invert(#123456) //Invierte el color

.destacado
	color darken(#123456, 20%)  //Devuelve un color 20% mas oscuro

p span
	color lighten(#789abc, 20)  // Devuelve un colo 20% mas claro

Código CSS
.caja {
    background: #edcba9;
}
.destacado {
    color: #0e2a45;
}
p span {
    color: #bccdde;
}

Condicionales

Otra de las cualidades de Stylus es que nos da la posibilidad de evaluar condiciones utilizando if / elseif / else

Stylus
/* Se define un mixin con 3 parametros*/
borde(redondeo, ancho, color)
	-webkit-border-radius redondeo
	-moz-border-radius redondeo
	border-radius redondeo
	border solid color ancho

/* Se evalúa una condicion y dependiendo del resultado se manda a
*  llamar al mixin borde
*/
.caja
	if saturation(#987654) > 50%
		borde(10px, 2px, #987654)
	else
		borde(8px, 5px, #abcdef)

Código CSS
.caja {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: solid #abcdef 5px;
}

Esto es solo un poco de lo que se puede hacer con stylus, si deseas conocer más puedes revisar su documentación