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 (111 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