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
Você pode gostar também…