JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

Less Css - Tutorial

¿Qué es?

Less es un pre-procesador de CSS, lo que significa que extiende el lenguaje CSS, añadiendo características tales como variables, mixins, funciones y muchas otras técnicas que le permiten hacer CSS más fácil de mantener.

Ver web oficial less, sección características lesscss.org/features

Características

Hay muchas, pero voy a poner las más importantes

  • Variables @variable: valor;
  • Permiten definir valores que podrán ser usados en todo el proyecto
  • Mixins ("mixing in")
  • Una manera de reutilizar el código y ser más eficiente. Pongamos unos id selector #uno, #dos y #mezcla
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    #uno{
        color: #111;
    }
    
    #dos{
        background-color: #FF0000;
    }
    
    #mezcla{
        #uno;
        #dos;
    }
    
  • Mixins con Parámetros selector(@variable){ propiedad: @variable;}
  • Muy útil para no estar copiando el mismo valor en varias propiedades
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    .border-radius(@radius: 5px) {
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    
    #uno {
      .border-radius(4px);
    }
    .dos {
      .border-radius(6px);
    }
    
    //en este caso es 5, el de por defecto
    .button {
      .border-radius;
    }
    
  • Namespaces namespace > mixin(param1, ..., paramn) o namespace mixin(param1, ..., paramn)
  • Una manera de juntar estilos, especialmente clases y mixins
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    
    //declaro namespace con two mixins
    #miNamespace {
      .cuadrado(@param) {
        width: @param;
        height: @param;
      }
      .color(@color) {
        color: @color;
      }
    }
    
    .box {
      //uso el namespace
      #miNamespace > .cuadrado(10px);
      #miNamespace .color(#ff00ff);
    }
    
    
    //compila en:
    .box {
      width: 10px;
      height: 10px;
      color: #ff00ff;
    }
    
  • Organización de estilos @import "nombredearchivo.less";
  • Tener varios archivos less dividiéndolos por sección, predefiniendo la paleta de colores, variables de referencia y uso de fuentes.
    En style.less
    1
    2
    3
    4
    
    @import "tipografias.less";
    @import "variables.less";
    @import "colores.less";
    @import "general.less";
    
    En general.less
    1
    2
    3
    4
    
    @dirImages: "../images";
    @dirFonts: "../fonts";
    @maxWidth: 1300px;
    @defaultPageMargin:1em;
    
    1
    2
    3
    4
    
    //para agregar una imagen como fondo utilizariamos un estilo similar a este
    .panel{
      background:url("@{dirImages}/fondo.jpg") repeat;
    }
    
    En tipografias.less
    1
    2
    3
    4
    
    @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    @font-family-serif:       Georgia, "Times New Roman", Times, serif;
    @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
    @font-family-base:        @font-family-sans-serif;
    
    En colores.less
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    //colores
    @rojo: #F00;
    @azul: #00F;
    @verde: #0F0;
    @negro: #000;
    @blanco: #FFF;
    
    //degradados less
    @gray-darker:            lighten(#000, 13.5%); // #222
    @gray-dark:              lighten(#000, 20%);   // #333
    @gray:                   lighten(#000, 33.5%); // #555
    @gray-light:             lighten(#000, 46.7%); // #777
    @gray-lighter:           lighten(#000, 93.5%); // #eee
    
    Y en la página web solo se añade el css saliente que une todos los import
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    <html>
        <head>
            <title>Ejemplo less css</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="css/style.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
            <h1>Ejemplo de uso Less css</h1>
            <div>
                <button class="botonVerde">boton1</button>
            </div>
        </body>
    </html>
    

Más información

Finalmente, para ver un ejemplo de lo que se puede hacer con less: carpeta less de bootstrap 3.2

Comentarios