LESS CSS, It just helps us to get more results with less code through its advanced features to finally save us work, technically it is a CSS pre-compiler, it does not try to replace the CSS itself, but simply offers us improvements for the development giving the language the use of variables, mixins (dynamic classes), color functions among other interesting and useful things. It will basically serve us to do more with less, it takes time to develop in this style sheet language but it is worthwhile when in the future we would like to reuse the same CSS with small modifications even for other projects.

As it is being used, obviously, skill is acquired and its implementation becomes simpler in more complex projects. The main difference between LESS and other CSS precompilers is that LESS allows real-time compilation by the browser through LESS.js2.

Now let’s analyze some points

Certainly LESS allows its execution in real time on the client side using JavaScript without pre-compilations on the server side, but this mode is only recommended during development and testing, but not when it is already about sites in production, in this one we must use server-side technologies for compilation and serve the end customer and traditional CSS style sheets with the known encoding embedded in the document itself or in external files.


Let’s see its implementation in JavaScript

Here we copy the code of the html document

<!doctype html>
<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>

<h2>LESS CSS</h2>
<div id="header"><span>hola mundo</span><br>
<span class='navigation'><a href="#">Menú</a></span>


Archivo style.less

@color: #FFF;
@background: #3d3d3d;
@border-color: #006699;
@ancho: 40%;
@padding: 10px;
@centro: center;

#header {
 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 {
 color: @color;

Let’s see now its implementation in php

We will use the lessc.inc.php library (

require "lessc.inc.php";

$less = new lessc;
$contenidoless="@color: #4D926F;
@background: #3d3d3d;
@ancho: 40%;

#header {
 color: @color;
 width: @ancho;
h2 {
 color: @color;

try {
 echo $less->compile($contenidoless);
} catch (exception $e) {
 echo "fatal error: " . $e->getMessage();
$less->compileFile("style.less", "output.css");

We explain some of the lines of php coding

$less->compile ($contentless); // Compile what is in the variable $contentless and generate traditional CSS code, with the echo said as CSS reflected in the web browser of the client.

$less->compileFile (“style.less”, “output.css”); // Generates an external file with css extension and traditional CSS code based on the style.less file

By ,

April 6, 2018


You might also like…

Business Process Automation with Scriptcase

In the modern business world, operational efficiency is not just a goal. It's a necessity. With inc...

AI-Driven Software Development: The Role of ChatGPT

In the rapidly evolving world of technology, artificial intelligence (AI) is playing an increasingl...

Low-Code: The Key to Accessible Digital Transformation

Digital transformation is imperative for companies wishing to remain competitive in the current era...

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.