O LESS CSS foi criado para otimizar o código CSS e sua tradução é MENOS CSS. Essa ferramenta nos ajuda a obter mais resultados com menos código através de seus recursos avançados para nos salvar, tecnicamente ele é um pré-compilador CSS, ele não tenta substituir o próprio CSS, mas simplesmente nos oferece melhorias para o desenvolvimento dando à linguagem o uso de variáveis, mixins (classes dinâmicas), funções de cor entre outras coisas interessantes e úteis.

Basicamente, nos servirá para fazer mais com menos, leva tempo para desenvolver nesta linguagem de folha de estilo, mas vale a pena quando, no futuro, gostaríamos de reutilizar o mesmo CSS com pequenas modificações, mesmo para outros projetos.

  • A medida que se usa o recurso, obviamente, a habilidade é adquirida e sua implementação se torna mais simples em projetos mais complexos.

A principal diferença entre o LESS e outros pré-compiladores CSS é que o LESS permite a compilação em tempo real pelo navegador através do LESS.js2.

Agora vamos analisar alguns pontos

Certamente LESS permite a sua execução em tempo real no lado do cliente usando JavaScript sem pré-compilações no lado do servidor, mas este modo é recomendado apenas durante o desenvolvimento e teste, mas não quando já é um site em produção, neste último precisamos usar tecnologias do lado do servidor para compilar e atender ao cliente final e às folhas de estilo CSS tradicionais com a codificação conhecida incorporada no próprio documento ou em arquivos externos.

Vamos ver sua implementação em JavaScript

Aqui copiamos o código do 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;
 }
 
}

Vamos ver agora sua implementação em php

Nós usaremos a biblioteca para isso 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 algumas das linhas de codificação php

$less->compile($conteudoless); // Compile o que está na variável $contentless e gere o código CSS tradicional, com o echo dito css refletido no navegador web do cliente.

$ less->compileFile (“style.less”, “output.css”); // Gera um arquivo externo com extensão css e código CSS tradicional baseado no arquivo style.less

You might also like…

Cloud Computing e suas tendências para 2020

O que é Cloud Computing? Apresenta a possibilidade de oferecer serviços através da Inter...

Aplicação com Abas utilizando o ScriptCase

Umas das funcionalidades mais interessantes desenvolvidas para auxiliar em grandes formulários sã...

SCRIPTCASE: O que é VS O que não é

Você conhece realmente o que é o Scriptcase? Nesse post pretendemos esclarecer todas as dúvidas ...

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.