#APUNTES DE LESS

---

##Variables.

Las variables almacenan valores que podemos reutilizar.

####Sintaxis

@color-principal: #FFF;

body{
    background-color: @color-principal;
}

####Salida en CSS

body{
    background-color: #FFF;
}

---

##Nesting (Anidación).

La anidación es una herramienta muy útil para mantener el código fuente de la hoja de estilo ligero y eficiente

####Sintaxis

@red: #FF0000;
@green: #00FF00;
@blue: #0000FF;

a {
    color: @red;

    &:visited {
        color: @green;
    }

    &:hover {
        color: @blue;
    }
}

####Salida en CSS

a{
    color: #FF0000;
}

a:visited{
    color: #00FF00;
}

a:hober{
    color: #0000FF;
}

---

##Mixins.

Los mixins nos ayudan a reciclar declaraciones para evitar mucho trabajo.

####Sintaxis

#####Declaracion del Mixin

//Sin parámetros

.mixin Nombre_del_Mixin(){
    color: $purple;
}

//Con parámetros

.mixin Nombre_del_Mixin(@parametro: valor){
    color: @parametro;
}

#####Implementacion del Mixin

//Sin parámetros

section{
    .Nombre_del_Mixin;
}

//Con parámetros

section{
    .Nombre_del_Mixin(valor);
}

---

##When.

Es como un If. Si eso es todo.

####Sintaxis

ejemplo 1

.responsive (@size) when (@size =< 1024px){
    width: 100%;
}

.article{
    .responsive(800px);
}

.article2{
    .responsive(1200px);
}

####Salida en CSS.

.article{
    width: 100%;
}

//.article2 no imprime nada por no cumplir la condición. 

ejemplo 2

.responsive (@size) when (@size =< 1024px){
    width: 100%;
}

.responsive (@size) when (@size > 1024px){
    width: 50%;
}

.article{
    .responsive(800px);
}

.article2{
    .responsive(1200px);
}

####Salida en CSS.

.article{
    width: 100%;
}

.article2{
    width: 50%;
}

---

##Escapar de LESS

Util cuando necesitamos que CSS haga calculos y no LESS.

####Sintaxis

.article{
    height: calc(~"50% - 10px");
}

####Salida en CSS

.article{
    height: X //resultado del calculo.
}