40% OFF FOR NEW LICENSES AND RENEWALS →

LESS CSS

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>
<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;
 }
 
}

Let’s see now its implementation in php

We will use the lessc.inc.php library (

<?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");
?>

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

You might also like…

A look at Scriptcase 9

In a daily basis this tool has given me great satisfaction, and very good and fast results in terms ...

Tips on facilitators for developers – Part II

Hello! On the latest post i’ve shown some hints on facilitators for developers. On today’s post ...

What are RAD, Framework and IDE – concepts and applicability

What are RAD, Frameworks and IDE? Understand the difference and how we can use them to optimize the ...

Comment this post

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.