Less es un plugin que sirve para otorgar las propiedades de los lenguajes de programación a las hojas de estilo, como pueden ser funciones o variables aparte de sumar numerosas funcionalidades la hora de escribir estilos en cascada.

Instalación de Less

Primer paso:

Crea un archivo style.less, puedes ponerle el nombre que quieras, aquí es donde escribiremos nuestros estilos Less. Después lo enlazaremos en el head de nuestra página. Es importante que este archivo valla antes script de Less.

<link rel="stylesheet/less" href="less/style.less" />

Segundo paso:

Descargarte la librería Less de su página y enlázalo a continuación de la hoja de estilos style.less. Puedes descargarla aquí.

<script type="text/javascript" src="less/less.min.js"></script>

Instalación concluida:

Si as seguido los pasos anteriores ya deberías tener en funcionamiento el plugin Less. Tu instalación debería quedar así.

<head>
    <link rel="stylesheet/less" href="less/style.less" /> 
    <script type="text/javascript" src="less/less.min.js"></script>
</head>

Uso basico de Less

Variables:

@color-coorporativo: #F34F25; 

.contenedor{ 
   color: @color-coorporativo; 
}
.parrafos{ 
   color: @color-coorporativo; 
}

Funciones:

.rounded(@value) { 
   -webkit-border-radius: @value; 
   -moz-border-radius: @value; 
    border-radius: @value; 
} 
#box2{ 
   .rounded(3px);
}

Comentarios:

//Soy un comentario Less

Todo el código Less que escribamos deberá ponerse en el archivo style.less

Si te ha sido de utilidad ¡deja un comentario! 🙂