STYLUS: PREPROCESADOR CSS

ESCRITO POR: DENKER EL 10/OCT/2013

CSS, DESARROLLO WEB

Stylus es un preprocesador CSS que permite escribir cdigo CSS de forma ms

organizada, rpida y eficiente. En este post vamos a ver cuales son las caractersticas
principales de este preprocesador y la forma en la que podemos empezar a trabajar
con l.

INSTALACIN
La instalacin de stylus es muy sencilla pero debemos tener instalado previamente
node.js, si no tienes node revisa el siguiente post: Node.js: Instalacin 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
1
Listo ya tienes stylus instalado.

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

stylus estilo.styl

Si no tienes ningn 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 indentacin que se le debe dar al codigo.
Stylus

1
2
3
4
5
6
7
8
9
10
11
12

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

Cdigo CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

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 ), tambin se puede utilizar las propiedades como variables
anteponiendo el signo arroba por ejemplo @width hace referencia al valor de la
propiedad ancho
Stylus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* Asignacion de variables */
color1 = #123456
color2 = #987654
color3 = #765432
ancho = 980px
tamanio-fuente = 15px
/* Utilizacin 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

Cdigo CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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
cdigo

Stylus

1
2
3
4
5
6
7
8
9
10

/* 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

Cdigo CSS

1
2
3
4
5
6

.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 matemticas
Stylus

1
2
3
4
5
6
7

color1 = #fffddd
.caja
width 250px
margin @width * .1
padding @margin + 5
color color1 - #fd9876

Cdigo CSS

1
2
3
4
5
6

.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

1
2
3
4
5
6
7
8

.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

Cdigo CSS

1
2
3
4
5
6
7
8
9

.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 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 evala 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)

Cdigo CSS

1
2
3
4

.caja {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: solid #abcdef 5px;

5
}
6
Esto es solo un poco de lo que se puede hacer con stylus, si deseas conocer ms
puedes revisar sudocumentacin