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

Por ,

6 de April de 2018

Compartir esta publicacion

a

También podría gustarte…

Tendencias de TI y Desarrollo Web para 2024: Hacia Nuevos Horizontes Tecnológicos

El mundo de la Tecnología de la Información (TI) y el Desarrollo Web está en constante evolució...

Sistemas web 101: comprensión de los fundamentos y beneficios

En la era digital actual, los sistemas web se han convertido en una parte integral de nuestra vida ...

¿Por qué el low-code es esencial para cualquier empresa?

Low-code es el término en el área de TI que se refiere al proceso de utilizar poco código en el ...

También podría gustarte…

Obtenga nuevas publicaciones, recursos, ofertas y más cada semana.

Utilizaremos la información provista para enviarle por correo electrónico boletines y ofertas. Puede darse de baja de los correos electrónicos en cualquier momento simplemente haciendo clic en el enlace "unsubscribe" en la parte inferior de cualquier correo electrónico o contactándonos a privacy @ scriptcase.net . Obtenga más información sobre nuestra Privacy Police .