LESS CSS fue creado para optimizar el código CSS, y su traducción al español es menos css. Esa Herramienta nos ayuda para obtener más resultado con menos código mediante sus características avanzadas para finalmente ahorrarnos trabajo, técnicamente es un pre-compilador CSS, no intenta reemplazar al CSS en sí, sino simplemente nos ofrece mejoras para el desarrollo dotando al lenguaje la utilización de variables, mixins (clases dinámicas), funciones de color entre otras cosas interesantes y útiles.
Nos servirá básicamente para hacer más con menos, lleva su tiempo para desarrollar en este lenguaje de hojas de estilo pero vale la pena cuando a futuro quisiéramos reutilizar el mismo CSS con pequeñas modificaciones incluso para otros proyectos
A medida se va utilizando obviamente se adquiere destreza y va tornándose sencilla su implementación en proyectos más complejos.
La principal diferencia entre LESS y otros pre compiladores CSS es que LESS permite la compilación en tiempo real por el navegador a través de LESS.js2 .
Ahora analicemos algunos puntos
Ciertamente LESS permite su ejecución en tiempo real en el lado del cliente mediante JavaScript sin pre compilaciones del lado del servidor pero, esta modalidad es solamente recomendada en tiempo de desarrollo y pruebas, no así cuando ya se trata de sitios en producción, en este último debemos usar tecnologías del lado del servidor para la compilación y servir al cliente final ya hojas de estilo CSS tradicionales con la codificación conocida embebida en el propio documento o bien en archivos externos.
Veamos su implementación en JavaScript
Aquí copiamos el código del documento html
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet/less" type="text/css" href="style.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> <title>LESS CSS</title> </head> <body> <h2>LESS CSS</h2> <div id="header"><span>hola mundo</span><br> <span class='navigation'><a href="#">Menú</a></span> </div> </body> </html>
Archivo style.less
@color: #FFF;
@background: #3d3d3d;
@border-color: #006699;
@ancho: 40%;
@padding: 10px;
@centro: center;
#header {
background:@background;
width: @ancho;
padding: @padding;
text-align: @centro;
border: 2px solid @border-color + #222222;
}
h2 {
color: @background;
}
@base: 24px;
.underline { border-bottom: 2px solid green }
#header {
.navigation {
font-size: @base / 2;
a {
.underline;
color: @color;
}
}
span{
color:#ccc;
}
}
Veamos ahora su implementación en php
Utilizaremos para ello la librería lessc.inc.php (https://github.com/leafo/lessphp)
<?php
require "lessc.inc.php";
$less = new lessc;
$contenidoless="@color: #4D926F;
@background: #3d3d3d;
@ancho: 40%;
#header {
color: @color;
background:@background;
width: @ancho;
height:@ancho;
}
h2 {
color: @color;
}
";
try {
echo $less->compile($contenidoless);
} catch (exception $e) {
echo "fatal error: " . $e->getMessage();
}
$less->compileFile("style.less", "output.css");
?>
Explicamos algunas de las líneas de la codifación php
$less->compile($contenidoless); // Compila lo que se encuentra en la variable $contenidoless y genera código CSS tradicional, con el echo dicho css se ve reflejado en el navegador web del cliente.
$less->compileFile(“style.less”, “output.css”); // Genera un archivo externo con extensión css y código tradicional CSS tomando como base el archivo style.less
También podría gustarte…