Transcript
CSS eficaz y SEO friendly con {LESS}
¿Qué es eso del {LESS} ?
¿ Un pre-procesador de código CSS ?
CSS$ lessc entrada.less > salida.css
Trabajar con {LESS} es casi como escribir CSS:
.contenedor .foo {
/* Reglas CSS */
}
CSS generado:
{LESS} tiene variables:
CSS generado:
.foo {
color: red; blue;background: red; blue;
}
CSS generado:
{LESS} tiene mixins:
?.circulo (@radio, @color) {
height: @radio;width: @radio;border-radius: @radio;background: @color;
}
.circular {
.circulo(200px, green);
}
{LESS} tiene funciones:
lighten(blue, 30%);
darken(red, 30%);
Y también hace aritmética:
width: 100px;width: 100px + 1em;
{LESS} usa @import y namespaces:
#namespace {
.mixin-1 {
// Reglas CSS
}
.mixin-2 {
// Reglas CSS
}…
}
#namespace > .mixin-1 ();
#ie-hacks {
.inline-block () {display:inline-block;*zoom:1;*display:inline;
}
.clearfix () {clear: both; overflow: auto;Zoom:1;
}
}
@import 'ie-fix.less';
.contenedor {
.img-left{
float:left;
}
#ie-hacs > clearfix();
}
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);
La palabra mágica: when
La palabra mágica: when
.bucle(@it) when (@it > 0) {
.span-@{it} {
// CSS de .span-X}
.bucle((@counter – 1));
}
.loop(4);
Organizando el código con @import:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.
Normalize, ie-hacks ...
layout.less
modules.less
custom.less
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit. Praesent diam dolor, imperdiet sed est et, rutrum mattis ligula. Donec commodo purus, eu placerat nisi dapibus in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere rhoncus suscipit.
Lorem ipsum dolor sit amet, consectetur
HTML 5 y el problema del SEO
HTML 5 quiere ser semántico
SEO necesita ser semántico
¿Qué aporta {LESS}?
header, section, footer {.row ();
}
section > article {.span-3 ();
}
@import 'layout.less'
Más {LESS} ?
OpenKnowledgeNetwork.com
top related