Stylus es un pre-procesador de código CSS, el cual nos permite a nosotros trabajar de forma más simple en nuestro editor de texto y a continuación les explico las razones de mi afirmación.
No pretendo enseñar como funciona Stylus, sino mostrar algunos ejemplos y el método de instalación
Este es una hoja de estilos (style sheet) tal y como la conocemos:
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Y esta sería la misma hoja de estilos creada con Stylus:
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
¿Dónde están las llaves? ¿A donde fueron los puntos y comas, los dos puntos? Al olvido, Stylus hace eso por nosotros.
Si estás empezando con CSS y HTML no es recomendable usar Stylus por el simple hecho de que puedes olvidar como es que funcionan las cosas realmente, pero si ya tienes tiempo en este mundo y quieres ahorrarte código y trabajo.. adelante.
Los programadores de Python encontrarán en Stylus algo muy similar a lo que están adaptados, pues solo se necesita indentar correctamente para que se haga la magia.
Instalación
Para que Stylus funcione tenemos que instalar Node.js el cual se encuentra en la rama Community, por lo que procedemos a hacerlo:
$ sudo pacman -S nodejs
Y posteriormente instalamos Stylus. La forma tradicional sería:
$ npm install -g stylus
Pero a mi no me funciona, por lo que resulta mucho más fácil instalar desde AUR:
$ yaourt -S nodejs-stylus
Como usar Stylus
Ok, ya tenemos instalado Node.js y tenemos instalado Stylus.. ¿Cómo lo usamos? Es simple. Digamos que tenemos un directorio con los siguientes ficheros:
- dir
-- index.html
-- style.css
Lo que tenemos que hacer es crear el fichero style.styl, que es en el que vamos a trabajar. En ese fichero podemos tener algo como:
body
background-color #ffff
font-size 12px
a.button
color red
padding 10px
Si guardamos o hacemos algún cambio no sucede nada, pues no estamos “compilando” nuestro fichero. Para compilarlo lo que hacemos es abrir un terminal en nuestro directorio (donde se encuentra el fichero style.styl) y ejecutamos:
stylus -c style.styl
Pero cada vez que guardamos el fichero style.styl habría que ejecutar el código, pero por suerte no es necesario, ya que si ejecutamos el mismo comando, pero añadiendo el parámetro -w (watch) sucede lo siguiente:
stylus -c -w style.styl
watching /usr/lib/node_modules/stylus/lib/functions/index.styl
compiled style.css
watching style.styl
compiled style.css
compiled style.css
O sea, automáticamente se compila el fichero.. ¿El resultado sería?
body{background-color:#fff;font-size:12px}
a.button{color:#f00;padding:10px}
Como pueden ver no solo nos crea nuestro código CSS, sino que elimina los espacios innecesarios para que nuestra hoja de estilos pese menos
No solo eso, Stylus nos permite pasar ficheros en CSS a su formato y la forma en que podemos utilizar su forma de sintáxis es muy variada. Y esto es solo un adelanto. Así que los animo si les interesa, conocer un poco más a Stylus
Continúar leyendo...
No pretendo enseñar como funciona Stylus, sino mostrar algunos ejemplos y el método de instalación
Este es una hoja de estilos (style sheet) tal y como la conocemos:
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Y esta sería la misma hoja de estilos creada con Stylus:
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
¿Dónde están las llaves? ¿A donde fueron los puntos y comas, los dos puntos? Al olvido, Stylus hace eso por nosotros.
Si estás empezando con CSS y HTML no es recomendable usar Stylus por el simple hecho de que puedes olvidar como es que funcionan las cosas realmente, pero si ya tienes tiempo en este mundo y quieres ahorrarte código y trabajo.. adelante.
Los programadores de Python encontrarán en Stylus algo muy similar a lo que están adaptados, pues solo se necesita indentar correctamente para que se haga la magia.
Instalación
Para que Stylus funcione tenemos que instalar Node.js el cual se encuentra en la rama Community, por lo que procedemos a hacerlo:
$ sudo pacman -S nodejs
Y posteriormente instalamos Stylus. La forma tradicional sería:
$ npm install -g stylus
Pero a mi no me funciona, por lo que resulta mucho más fácil instalar desde AUR:
$ yaourt -S nodejs-stylus
Como usar Stylus
Ok, ya tenemos instalado Node.js y tenemos instalado Stylus.. ¿Cómo lo usamos? Es simple. Digamos que tenemos un directorio con los siguientes ficheros:
- dir
-- index.html
-- style.css
Lo que tenemos que hacer es crear el fichero style.styl, que es en el que vamos a trabajar. En ese fichero podemos tener algo como:
body
background-color #ffff
font-size 12px
a.button
color red
padding 10px
Si guardamos o hacemos algún cambio no sucede nada, pues no estamos “compilando” nuestro fichero. Para compilarlo lo que hacemos es abrir un terminal en nuestro directorio (donde se encuentra el fichero style.styl) y ejecutamos:
stylus -c style.styl
Pero cada vez que guardamos el fichero style.styl habría que ejecutar el código, pero por suerte no es necesario, ya que si ejecutamos el mismo comando, pero añadiendo el parámetro -w (watch) sucede lo siguiente:
stylus -c -w style.styl
watching /usr/lib/node_modules/stylus/lib/functions/index.styl
compiled style.css
watching style.styl
compiled style.css
compiled style.css
O sea, automáticamente se compila el fichero.. ¿El resultado sería?
body{background-color:#fff;font-size:12px}
a.button{color:#f00;padding:10px}
Como pueden ver no solo nos crea nuestro código CSS, sino que elimina los espacios innecesarios para que nuestra hoja de estilos pese menos
No solo eso, Stylus nos permite pasar ficheros en CSS a su formato y la forma en que podemos utilizar su forma de sintáxis es muy variada. Y esto es solo un adelanto. Así que los animo si les interesa, conocer un poco más a Stylus
Continúar leyendo...