Instalar Stylus en ArchLinux sin morir en el intento

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.

Stylus

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

Se instala bien, 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


Deja tu comentario

Tu direcciรณn de correo electrรณnico no serรก publicada. Los campos obligatorios estรกn marcados con *

*

*

  1. Responsable de los datos: Miguel รngel Gatรณn
  2. Finalidad de los datos: Controlar el SPAM, gestiรณn de comentarios.
  3. Legitimaciรณn: Tu consentimiento
  4. Comunicaciรณn de los datos: No se comunicarรกn los datos a terceros salvo por obligaciรณn legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu informaciรณn.

     cyberalejo17 dijo

    Es con:

    $ sudo npm install -g stylus

        elav dijo

      Pero ยฟPor quรฉ? Si solo quiero usarlo en mi sesiรณn.. pero bueno, si el problema es ese.. ๐Ÿ™‚

          nano dijo

        En un principio estรก bien, pero Stylus se usa con distintos plugins a medida que avanzas, por ejemplo Nib o Stylus auto prefixer.

        Creo yo que cuando lo instalas con Yaourt no queda guardado en /usr/local/lib/node_modules y si trataras de importar y usar alguna de las librerรญas, te joderรญas xD

        Pasa que como te dije en el foro, Stylus se basa en usar librerรญas de forma transparente desde la terminal, es la esencia de este preprocesador, hace cosas como:

        stylus -u jeet -u rupture -u typographic -u nib -w style.styl

        Por decir algo (puedes tener un alias o una funciรณn o usar gulp o grunt, o lo que sea :3). Lo interesante de eso es que no te embasura el css de plano al compilar, sino que lo rellena ยซdinรกmicamenteยป a medida que dentro de tu cรณdigo vas llamando las funciones y mixins de las respectivas librerรญas.

        En efecto te va a poner cรณdigo plano que estรฉ declarado (resets, clearfixes, etc) pero no te va a hacer fumarte por ejemplo las funciones span() de jeet si no las llamas y eso es amor puro x3

        Es todo un mundo y por eso te digo, instalรกndolo de esa manera no se en que ficheros caiga y no creo que puedas usar tan simple las extensiones porque cuando usas la lรญnea de comandos, el –use flag va a buscar dentro de la carpeta de instalaciรณn de stylus, con node es node_modules y queda donde dije arriba, con Yaourt, NPI xD

     usemoslinux dijo

    interesante!

     usuario dijo

    Sugiero que hagan un tutorial Actualizado de como usar un nรบmero SIP para llamar desde la computadora a celulares… gratis