[CSS][MEDIO] LessCSS

Hoy por hoy está de moda programar en NodeJS, ¿porque?...

NodeJS es un lenguaje de programación Asyncrónica (en hilos o threads) orientado al JavaScript pero ejecutado desde el lado del servidor.

Este lenguaje de programación ha resultado tan revolucionario que han aparecido una cantidad enorme de productos libres que están asociados a este, desde hostings que duran solamente su ejecución en node como Heroku, bases de datos no SQL de alto rendimiento como MongoDB pero también han aparecido frameworks y softwares que nos hacen la vida mas fácil delo lado del navegador.

Uno de estos se llama LessCSS y se trata de una tecnología creada en JavaScript la cual interpreta hojas de estilo a lo puro SCSS (You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login) pero sin tener que ser compilado por el lado del servidor.

Por ejemplo, nos descargamos el archivo JavaScript de CSSLess y lo incluimos en nuestro proyecto, ahora creamos una hoja de estilo con extensión .less y tendremos todo el poder de una hoja CSS pero dinámica con opción de crear funciones, variables y modelos.

// LESS

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Este código .less se puede compilar utilizando lessc desde el npm de nodeJS pero ahora podemos utilizarlo directamente desde el navegador utilizando esta librería en JavaScript.

El mismo código en CSS:

/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Si a alguien le interesa esta maravilla digital puede pasar por su web oficial: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Saludos.

Muy bueno esto, recomendado en su totalidad.

Otro ejemplo:

@niceBlue: #3f8ebf;
@strongBlue: #4579ac;
li:nth-child(even){
        span{
          float: right;
          background-color: fadein(@strongBlue, 50%);
          text-align: right;
          padding-right: 15px;
        }
      }

Sumado a ésto con bootstrap haces maravillas.

Saludos,
Xt3mP.