Como usar LESS

LESS sirve para hacer código CSS de una manera mas divertida.
Para instalarlo sólo debemos descargar el archivo less de su página web http://lesscss.org/

Instalación

<link rel="stylesheet/less" type="text/css" href="mi_archivo.less" />
<script src="less.js" type="text/javascript"></script>
Importante:
  • La etiqueta LINK tiene como atributo rel a "stylesheet/less"
  • Nuestro archivo LESS debe tener como formato less (mi_archivo.less).

Variables

Podemos usar variables para guardar datos que vamos a usar después.
El codigo less que vamos a ver a continuación se compila y se transforma automaticamente en el codigo css que se muestra en el cuadro del lado derecho.

Codigo lessCodigo css
@color : #ddd;
@medida : 2px;

.cuadro{
    background : @color;
    border: @medida solid black;
}

==>
.cuadro{
    background : #ddd;
    border: 2px solid black;
}



Usted dirá ¿Para que usar Less si voy a escribir más código? , bueno te diré que usar less para un código tan pequeño como el cuadro anterior no tiene sentido. Less debería usarse para códigos mas grandes para que que así el mantenimiento se haga de manera sencilla tan sólo cambiando las variables, por ejemplo si tenemos la variable @color : #fda y la usamos al menos unas 50 veces en nuestro código, sólo tendríamos que cambiar el valor de la variable @color a por ejemplo @color : #efd y se cambiarán automáticamente también las 50 veces que uso la variable @color


Mixins

Podemos usar clases enteras dentro de otras clases sólo llamando a esa clase que queramos utilizar, también podemos usarla como funciones que lleven argumentos tal como veremos a continuación.

Ejemplo 1: Podemos usar clases en otras clases

Código Less que Ud. escribeCodigo Css que se genera
.franz{
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

.cuadro{
    height  : 60px;
    .franz; 
}

.escritorio{
    height  : 200px;
    .franz; 
}








.franz{
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

.cuadro{
    height  : 60px;
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px; 
}

.escritorio{
    height  : 200px;
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

Ejemplo 2 : Podemos tambien usar clases con argumentos.


Código Less que Ud. escribe Codigo Css que se genera
.redondeado (@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.silla{
    background : red;
    .redondeado;
}

.mesa{
    background : green;
    .redondeado(6px);
}
.silla{
    background : red;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.mesa{
    background : green;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
wrgwrg

Nested Rules

Podemos crear estilos a un selector hijo simplemente creando los estilos dentro del selector padre.

Código Less que Ud. EscribeCódigo Css que se genera
#padre{
    label{
        font-size : 16px;
    }
    span{
        text-align : center;
        a{
            color : red;
            &:hover {
                color : orange 
            }
        }
    }
}
#padre label{
    font-size : 16px;
}

#padre span{
    font-size : text-align : center;
}

#padre span a{
    text-decoration : none;
}

#padre span a:hover{
    color : orange
}

No hay comentarios:

Publicar un comentario