[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 (No tienes permitido ver los links. Registrarse o Entrar a mi cuenta) 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: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

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.