Este documento describe las características y ventajas del preprocesador LESS para CSS. LESS permite el uso de variables, mixins, funciones y aritmética para generar hojas de estilo CSS más limpias y mantenibles. También soporta importación de archivos, medios queries y bucles para organizar el código CSS de manera semántica y amigable para el SEO.

1. CSS eficaz y SEO friendly con {LESS}

2. ¿Qué es eso del {LESS} ?
¿ Un pre-procesador de código CSS ?
$ lessc entrada.less > salida.css
CSS

3. Trabajar con {LESS} es casi como escribir CSS:
CSS generado:
.contenedor .foo {
/* Reglas CSS */
}

4. {LESS} tiene variables:
CSS generado::
generado
.foo {
color: red; blue;
background: red; blue;
}

5. {LESS} tiene mixins:
.circulo (@radio, @color) {
height: @radio;
width: @radio;
border-radius: @radio;
background: @color;
}
.circular {
.circulo(200px, green);
}
?

6. {LESS} tiene funciones:
darken(red, 30%);
lighten(blue, 30%);
Y también hace aritmética:
width: 100px;
width: 100px + 1em;

7. {LESS} usa @import y namespaces:
#namespace {
#ie-hacks {
.mixin-1 {
.inline-block () {
display:inline-block;
// Reglas CSS
*zoom:1;
}*display:inline;
}
.mixin-2 {
.clearfix () {
clear: both;CSS
// Reglas
overflow: auto;
}Zoom:1;
…}
} }
@import 'ie-fix.less';
.contenedor {
.img-left{
#namespace > .mixin-1 ();
float:left;
}
#ie-hacs > clearfix();
}

8. Las palabra mágica @media:
.contenedor {
// Reglas CSS
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
// Rectificamos para iPad
}
}
@import "library.less" screen
and (max-width: 400px);

9. La palabra mágica: when

10. La palabra mágica: when
.bucle(@it) when (@it > 0) {
.span-@{it} {
// CSS de .span-X
}
.bucle((@counter – 1));
}
.loop(4);

11. Organizando el código con @import:
Lorem ipsum dolor
Lorem ipsum dolor
sit amet, consectetur
sit amet,elit. Duis
consectetur
adipiscing
posuere rhoncus suscipit.
adipiscing elit. Duis
Praesent rhoncus
posuere diam dolor, suscipit.
imperdiet sed est et,
Praesent diam dolor,
rutrum mattis ligula.
Donec commodo purus,
imperdiet sed est et,
eu placerat
rutrum in. nisi ligula.
mattis
dapibus
Donec commodo purus,
Lorem ipsum dolor
eu placerat nisi
sit amet, consectetur
dapibus in. Duis
adipiscing elit.
Normalize, ie-hacks ...
custom.less
layout.less
posuere rhoncus suscipit.
Lorem ipsum dolor
sit amet, dolor
Lorem ipsum consectetur
sit amet, consectetur
adipiscing elit. Duis
posuere rhoncus suscipit.
modules.less

12. HTML 5 y el problema del SEO
HTML 5 quiere ser semántico
SEO necesita ser semántico

13. ¿Qué aporta {LESS}?
@import 'layout.less'
header, section, footer {
.row ();
}
section > article {
.span-3 ();
}

14. Más {LESS} ?

15. OpenKnowledgeNetwork.com