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…