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 de…

Scriptcase e os Web services

Nesta oportunidade estarei explicando como trabalhar com web services dentro do scriptcase, diretame...

Scriptcase usa MVC?

Talvez você em algum momento já possa ter pensado sobre essa questão,”será que o Scriptcase us...

Como implementar A2F usando desenvolvimento próprio em NodeJS em uma aplicação Scriptcase

No artigo anterior falamos sobre A2F com o Swivel como ferramente externa para integrar nossas aplic...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.