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 abril de 2018

Compartir esta publicacion

a

También podría gustarte…

API: ¿qué es y cuáles están disponibles en Scriptcase?

Comprenda todo sobre que es una API, para qué sirven y ejemplos de API que ya están integradas co...

Tendencias de TI y Desarrollo Web para 2020

Veamos algunas tendencias fuertes de desarrollo web para 2020 aquí. Comienza un nuevo año, en ...

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...

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 .