SummArg | Cursos y recursos para webmasters

27/04/2011

Escribir menos CSS y ahorrar más tiempo con LESS

Esta excelente aplicación tiene por finalidad ayudar para que el desarrollo de un sitio sea mucho mas rápido y fácil. Se puede utilizar LESS para crear variables, ejecutar operaciones sobre dichas varibales, anidar reglas y elaborar reglas para simplificar CSS3.

El script fue creado por Alexis Sellier. Pueden ver un video-tutorial de 3 minutos en incident57.com y encontrar mas información en su sitio oficial.

Implementar LESS es bastante simple. Bastará con convertir nuestra plantilla de estilos de .css a .less, y al vincularlo en nuestro documento cambiamos de rel=”stylesheet” a rel=”stylesheet/less”. Luego vinculamos el script que puede descargarse desde lesscss.org o bien utilizar el archivo que se encuentra en el repositorio de Google. Para que funcione sólo necesitamos vincular primero las plantillas de estilo y luego el script.

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Luego podemos empezar a editar nuestra plantilla de estilos. Con LESS primero definimos la variable, le añadimos un valor, y luego llamamos a esa variable tantas veces como lo necesitemos. Escribimos el siguiente ejemplo:

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

Y se imprime:

/* CSS Compilado */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

También podemos realizar operaciones matemáticas sobre nuestras variables.

// LESS
@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%);
}

Se imprime:

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

Existen mas ejemplos para darnos una idea de cómo aprovechar LESS y documentación en cssless.org.

Dejar un comentario