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…

Key Features to become a good Web Developer

Perhaps at some point you have wondered what skills would be required to become a web developer. ...

How to implement A2F using Own Development in NodeJS in a Scriptcase application

A2F using Own Development in NodeJS A2F: In a previous article, we talked about Swivel as an extern...

Disabling autofill and autocomplete Chrome browser in login screens

Hello, here I want to show an alternative to disable the autofill and autocomplete of the chrome bro...

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.