30% OFF para compra e renovação. Comprar agora

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…

Usando Biblioteca Externa para montar DataGrids em formulários e Report PDF

Nesse artigo vamos apresentar uma classe externa em php desenvolvida exclusivamente para usar com Sc...

Segurança e compatibilidade do site

Segurança e compatibilidade do site Aqui estão alguns comentários sobre segurança de site...

Frameworks – o que são e como utilizá-los

Frameworks em poucas palavras são um esqueleto / estrutura, um quadro genérico e "recarregável" ...

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.