less y Twitter Bootstrap

Conceptos generales

• Twitter Bootstrap permite trabajar con less o con sass
• Nosotros trabajaremos con less que viene "desde siempre" en Twitter Bootstrap.
• Permite manejar variables, mixins, reglas anidadas...
• Lo más práctico es mirar la parte de características del lenguaje less dentro de su web.

Variables

• Código en less:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

• Se procesa y genera el siguiente css:

#header {
  color: #6c94be;
}

Mixins

• Podemos incluir un conjunto de propiedades de una regla css dentro de otras reglas:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
 
.post a {
  color: red;
  .bordered;
}

Reglas anidadas

• En css sería:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

• Mediante less puede quedar más fácil de lectura:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Más sobre less

• Mira en su página web.

less y Twitter Botstrap