CSS dinamicamente con “{less}”

Al momento de escribir código CSS, hemos tenido la sensación de: ¿Por qué no puedo usar variables que sucede?, Ahora puedes hacerlo con {less}.

{less} te modifica el comportamiento de CSS para que puedas usar variables, funciones, operaciones y mezclar estos para escribir código más rápidamente y usando tus Habilidades  de programador.

El resultado es mostrado en el navegador como código CSS simple y funciona con todos los navegadores, también puede ser usado de lado del cliente y del servidor. Aquí te muestro algunos ejemplos:

Variables

Con {less}

CSS:

 
@color: #4D926F;
 
#header {
  color: @color;
}
h2 {
  color: @color;
}

Resultado

CSS:

 
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mezclas

Con {less}

CSS:

 
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
 
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Resultado

CSS:

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

Funciones y operaciones

Con {less}

CSS:

 
@the-border: 1px;
@base-color: #111;
@red:        #842210;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Resultado

CSS:

 
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

y muchos otros ejemplos

El sitio tiene extensa documentación y su uso puede ahorrarnos algunas líneas menos.

Enlace y descarga: {less}

Documentación: {less} docs

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s