LESS CSS – ¿Qué es y cómo optimizar su CSS? | Scriptcase Blog - Development, Web Design, Sales and Digital Marketing

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

Tambien te puede interesar

Alternativa a visual basic

Scriptcase es la mejor alternativa a Microsoft Visual Basic. Si vienes programando con VB ó VB ...

Alternativa a phprunner, phpmaker

En el mundo de desarrollo PHP, los desarrolladores tienen ventajas sobre otros desarrollado...

Alternativa ASP.Net

ASP.NET es un entorno para aplicaciones web desarrollado y comercializado por ...

Comentar este post

Reciba los nuevos post, novedades y ofertas!

Ingresa tu e-mail para recibir orientaciones y asistencia técnica durante el período de evaluación, además de comunicaciones como novedades y ofertas especiales de Scriptcase. Tu información será utilizada de acuerdo con nuestra política de privacidad. Puedes optar por no participar en cualquier momento