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

Por ,

6 de abril de 2018

Compartilhar esta postagem

a

Você pode gostar também…

Desenvolvimento de Software Impulsionado pela IA: O Papel do ChatGPT

No mundo em rápida evolução da tecnologia, a inteligência artificial (IA) está desempenhando u...

Low-Code: A Chave para a Transformação Digital Acessível

A transformação digital é um imperativo para empresas que desejam permanecer competitivas na era...

Tendências de TI para 2024: Rumo a Novos Horizontes Tecnológicos

O mundo da Tecnologia da Informação (TI) e do Desenvolvimento Web está em constante evolução, ...

Você pode gostar também…

Receba novas postagens, recursos, ofertas e muito mais a semanalmente.

Nós utilizaremos seu email para te adicionar a nossa Newsletter semanal. Você pode sair desta lista a qualquer momento clicando no link no final dos emails recebidos, ou entrar em contato conosco em vendas@scriptcase.com.br. Conheça nossa Política de Privacidade.