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

You might also like…

Principales características de un buen desarrollador web

Quizás en algún momento se haya preguntado qué habilidades se necesitan para convertirse en desa...

Cómo Implementar A2F usando un Desarrollo Propio en NodeJS en una aplicación Scriptcase

En un anterior a2f artículo hablamos de Swivel como herramienta externa para integrar nuestra...

PROCESAMIENTO DE DATOS A PARTIR DE EL FORMULARIO DE TIPO CONTROL

El procesamiento de los datos se puede realizar a nivel de Base de datos con procedimientos almacen...

You might also like…

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.