Stylus, deja de escribir y comienza a programar CSS.

Hello HumanOS!!! Hoy les traigo una súper herramienta para escribir CSS. Es verdad que ya existen pre-procesadores de CSS muy famosos y muy utilizados como LESS y SASS pero STYLUS es impresionante ya que combina lo mejor de los estos con una sintaxis minimalista al estilo Python.

stylus

CSS

body {
  background: #808080;
}
.humanOS {
  background: #772953;
  width: 50%;
  height: 100px;
}
.humanOS input {
  border-radius: 2px;
}
.humanOS:before {
  content: "Hello";
}

Quitemos esto “{” y esto “}”

body
  background: #808080;

.humanOS
  background: #772953;
  width: 50%;
  height: 100px;

.humanOS input
  border-radius: 2px;

.humanOS:before
  content: "Hello";

Ahora quitemos esto “;”

body
  background: #808080

.humanOS
  background: #772953
  width: 50%
  height: 100px

.humanOS input
  border-radius: 2px

.humanOS:before
  content: "Hello"

Se ve bien, pero quitemos también esto “:”

body
  background #808080

.humanOS
  background #772953
  width 50%
  height 100px

.humanOS input
  border-radius 2px

.humanOS:before
  content "Hello"

Le falta algo… Ahhh Python Style!!!

body
   background gray

.humanOS
  background #772953
  width 50%
  height 100px

  &:before
    content "Hello"
  input
    border-radius 2px

Que tal unas variables

humanOS_color=#772953
background_color=gray

body
   background background_color

.humanOS
  background humanOS_color
  width 50%
  height 100px

  &:before
    content "Hello"
  input
    border-radius 2px

Unos métodos ahora

humanOS_color=#772953
background_color=gray

getHumanOSColor()
  background humanOS_color

getBackgroundColor()
  background background_color

body
  getBackgroundColor()

.humanOS
  getHumanOSColor()
  width 50%
  height 100px

  &:before
    content "Hello"
  input
    border-radius 2px

Esto es Stylus???

Pues si… como vieron esas son algunas de las potencialidades de Stylus, tiene muchas más como el uso condicionales y ciclos por eso les dejo la documentación offline Stylus.docset.zip (103 descargas) , la url del proyecto en GitHub  y le de la documentación online para que vean esos ejemplos.

Instalación

Stylus esta escrito en Node.js por lo que lo podemos instalar usando npm.

sudo npm install stylus -g

Usando Stylus

Si usas algún IDE, puede que tenga integración con Stylus como es el caso de WebStorm donde solo hay que ir a File>New>Stylesheet y seleccionar Stylus File.

Si no usas un IDE o no tiene integración con Stylus lo puedes hacer desde el terminal con el siguiente comando:

stylus filename.styl -w
  • filename.styl es el archivo donde estamos escribiendo código Stylus.
  • -w es para que vigile el archivo y cada vez que se haga una modificación lo compile, por así decirlo, en un archivo CSS con mismo nombre.

Y ya..

Espero que les sea útil y dejen su impresión en los comentarios… SAludos

19 comentarios » Puedes dejar tu comentario también

  1. 00

    Michel Frometa

    dijo:

    Firefox 48.0 Ubuntu x64

    no se …. me parece que mejor aprendo css y ya ¿que creen?

  2. 00

    Nesty

    dijo:

    Firefox 48.0 Ubuntu x64

    @Michel Frometa
    De seguro cuando hagas unos cuantos css y te des cuenta de la cantidad de cosas que tienes que repetir…le darás un chance a stylus 😉

  3. 00

    ryuk

    dijo:

    Chromium 53.0.2785.143 Ubuntu x64

    @Michel Frometa
    IMHO, primero aprende CSS, despues usa Stylus.

  4. 00

    Yoandy

    dijo:

    Firefox 49.0 Ubuntu x64

    Muy buena herramienta …

  5. 00

    anon4us

    dijo:

    Firefox 48.0 Windows 10 x64 Edition

    esto es mucho más cómodo que CSS parece pseudocódigo!! lo uso desde el año pasado no me quejo, es mucho más simplificado que SASS y Less

  6. 00

    Yadiel Pérez Villazón

    dijo:

    Firefox 38.0 GNU/Linux

    Está genial esta herramienta pero a mi Python no me gusta mucho por el dichoso indentado, pero vale, para los que le agradan Python le es muy familiar. La realidad es que minimiza código y es lo que los programadores siempre buscamos.

  7. 00

    Ir@l2

    dijo:

    Google Chrome 54.0.2840.68 Android 5.1

    Les recomiendo SASS, tiene una herencia de estilos poderosa. En http://librosweb.es hay un curso en español que está bastante bueno. Bootstrap 4 esta siendo desarrollado con SASS.

  8. 00

    R4im3L

    dijo:

    Microsoft Edge 14.14393 Windows 10 x64 Edition

    Sin embargo, Stylus no compila CSS nativo como hace Scss, lo cual es muy útil cuando estás en grandes projectos y necesitas código css ajenos, .. otra cosa, ¿compila Stylus tan rápido como libsass? … 😉 …

  9. 00

    Nesty

    dijo:

    Firefox 48.0 Ubuntu x64

    R4im3L :
    Sin embargo, Stylus no compila CSS nativo como hace Scss, lo cual es muy útil cuando estás en grandes projectos y necesitas código css ajenos, .. otra cosa, ¿compila Stylus tan rápido como libsass? … …

    Stylus te genera el codigo nativo CSS, su principal ventaja frente a otros es la simplicidad de su código…acá te dejo un ejemplo sencillo:
    border()
    -moz-border-radius: arguments
    -webkit-border-radius: arguments
    border-radius: arguments
    body
    background blue

    div
    #uno
    color yellow
    img
    border 50%
    y este es el resultado:
    body {
    background: #00f;
    }
    body div #uno {
    color: #ff0;
    }
    img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    }

  10. 00

    Kovah

    dijo:

    Firefox 44.0 GNU/Linux

    @R4im3L
    Papa, stylus si compila css nativo, probado y comprobado, y sí, sí compila extremadamente rápido, no sé si tan rápido como libsass, pero si a mí me compila en 0.0000001s, realmente no lo necesito más rápido :).

    @Ir@l2
    Yo en lo personal no uso Bootstrap, por una serie de motivos que no voy a mencionar ahora, así que realmente no me preocupa, pero, además, creo que Bootstrap lo desarrollan en Less.

    @todos
    Stylus es más que genial, llevo 4 o 5 meses usándolo y es una de las mejores cosas que me han ocurrido desde que empecé a desarrollar para la web, así que lo recomiendo totalmente, o por lo menos pruébenlo y después me dicen :).

  11. 00

    Ir@l2

    dijo:

    Google Chrome 54.0.2840.87 Windows 7 x64 Edition

    @Nesty
    No entendiste, Stylus no compila código nativo, o sea no puedes escribir código css “normal” en un archivo Stylus. La simplicidad de Stylus no es una ventaja frente a los demás porque SASS también tiene una sintaxis así de simple.

  12. 00

    Ir@l2

    dijo:

    Google Chrome 54.0.2840.87 Windows 7 x64 Edition

    @Kovah
    Lo desarrollaban hasta la versión 3, a partir de la 4 es SASS por las ventajas de herencia de estilos que este ofrece en comparación con LESS.

  13. 00

    Nesty

    dijo:

    Firefox 48.0 Ubuntu x64

    @Ir@l2
    Stylus no compila código nativo, o sea no puedes escribir código css “normal” en un archivo Stylus. ??
    te refieres a esto:
    border()
    -moz-border-radius: arguments
    -webkit-border-radius: arguments
    border-radius: arguments
    body {
    background: #00f;
    font-size: 20px;
    }
    img
    border 80%

  14. 00

    Kovah

    dijo:

    Firefox 44.0 GNU/Linux

    @Ir@l2
    Que sí colega, que sí puedes escribir código css de toda la vida, llevo meses usándolo y ha habido veces que lo he tenido que hacer.

  15. 00

    R4im3L

    dijo:

    Opera 41.0.2353.46 Windows 10 x64 Edition

    Ok, luego de leer en la doc del sitio de Stylus, creo q es otro q llegó tarde a la fiesta. Es un exclente preprocesador, tiene “features” únicas (como Property lookup 😀 ) pero no es nada que marque la diferencia como para motivarme a hacer el cambio. Su comunidad no creo q sea tan grande como la de SASS.
    En cuanto a si soporta o no plain CSS sintax:

    “…There are a few caveats to this rule: since the two styles may be mixed and matched, some indentation rules still apply. So although not every plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus’ other powerful features…”
    source –> http://stylus-lang.com/docs/css-style.html

    Benchmarks –> https://www.solitr.com/blog/2014/01/css-preprocessor-benchmark/

    Cualquiera q haya hecho el cambio de SASS (Ruby) a SASS (libsass), por ejemplo, sabe que esa diferencia de segundos es notable en el workflow y más cuando se usan task runners como Grunt y Gulp donde se encadenan otra serie de tareas que esperan por que el CSS esté listo…

  16. 00

    Kovah

    dijo:

    Firefox 49.0 Ubuntu x64

    Ya gente, vamos a dejar la guerra, que cada cual use el que quiera, pero tampoco vamos a tirarle a todo lo que ponen, al final todo es cuestión de gustos.

  17. 00

    leiserfg

    dijo:

    Google Chrome 53.0.2785.143 GNU/Linux x64

    Stylus no es nuevo, lo vi por primera vez ya hace unos 5 años, pero sin ningún framework grande detrás es complicado atraer desarrolladores.

  18. 00

    Mario

    dijo:

    Firefox 49.0 Ubuntu x64

    Me gusta

  19. 00

    Cesar Bretana

    dijo:

    Google Chrome 54.0.2840.87 Mac OS X 10.12.0

    Stylus es uno de los preprocesadores mejores pensados q he visto debido a las facilidades para hacer todo, pero todavia le falta un poco, le falta q grandes comunidades como Bootstrap comiencen a usarlo para de veras verle provecho al mismo, al mismo autor de este articulo, le sugiero q vea acerca de Laravel Elixir, es la otra superr herramienta

Deja un comentario

Tu dirección de correo electrónico nunca será compartida.