5

Eu vou começar a estudar LESS, mas o problema é que não consigo avançar para o primeiro passo.

Se eu colocar o <link rel="stylesheeet/less"...> não funciona. Só funcionar se eu colocar o <link rel="stylesheeet"...> sem o /less.

Andei lendo e vi que poderia funcionar se eu rodasse em cima do WAMP. Mesmo assim não funcionou. Alguém já teve esse problema e pode me dar uma luz?

----- HTML -----

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet/less" type="text/css" href="bootstrap.less">
        <script src="js/bootstrap.js"></script>
    </head>
    <body>
    </body>
</html>

----- CSS -----

body{
  background: url("imagens/bg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
2
  • Você está testando sua página em um servidor ou abrindo direto o arquivo HTML?
    – Kazzkiq
    Commented 12/12/2014 às 20:25
  • Testei apenas pelo servidor local. WAMP. Direto pelo html, tb não funcionou. Commented 16/12/2014 às 19:27

5 Respostas 5

5

É importante lembrar que os navegadores não entendem LESS nativamente! Sendo assim, só adicionar o estilo em formato LESS à sua página não funcionaria mesmo. Para contornar isto você tem basicamente duas soluções:

Solução 1: Less.js

Faça o download do LESS e importe o arquivo less.js no seu projeto junto do seu arquivo .less:

<link rel="stylesheet/less" type="text/css" href="bootstrap.less">
<script src="less.js" type="text/javascript"></script>

Esta solução não é aconselhada para o ambiente de produção, já que toda vez que um usuário acessassar a sua página, o JavaScript teria que interpretar e compilar seu arquivo .less em tempo de execução.

Solução 2: Compilar o LESS em CSS

Seguindo a documentação do projeto, com o Node.js instalado, você poderia usar a seguinte linha de comando para compilar seu arquivo:

$ lessc caminho/para/meu/arquivo/estilo.less

Você também pode utilizar uma interface gráfica caso não seja familiarizado com o terminal.

1
  • Eu estou usando o SublimeText3. Achei em um dos tutos que vi, recomendam instalar o node.js e no sublime, alguns plugins que permitem q o próprio Sublime faça essa compilação. Commented 16/12/2014 às 19:35
4

Você precisa baixar e incluir o interpretador de LESS em JavaScript para isso funcionar:

<script src="less.js" type="text/javascript"></script>

Referência: http://lesscss.org/#client-side-usage

3
  • bfavaretto,obrigado pela resposta. Fiz o que você disse. Baixei e fiz o link referente ao less.js. Mas ainda não funcionou. Dei mais uma testada e continua igual. Se tirar o /less, tudo funciona. <link rel="stylesheet/less" type="text/css" href="bootstrap.less"> <script src="less.js" type="text/javascript"></script> Commented 10/12/2014 às 15:39
  • De fato, fui testar e vi o mesmo. Se tiver novidades, atualizo aqui.
    – bfavaretto
    Commented 10/12/2014 às 16:55
  • Também li que no Chrome, não funciona.Apesar de ter estranhado isso, fui testar no FFox e no IE. Mesmo problema! Não faço ideia do que pode ser. Commented 10/12/2014 às 17:24
2

Resolvido o problema!

Para isso:

Usar um compilador(não sei se é esse o nome) para o less. Direcionar o para o arquivo CSS que esse compilador vai gerar.

Aqui funcionou!

Estou rodando em cima do WAMP, não testei fora dele.

O ficou assim:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<script type="text/javascript" src="js/less.js"></script>

obs: O meu less.js, é o bootstrap.js renomeado.

Espero ter ajudado alguém. Agradeço aos usuários que comentaram e tentaram me ajudar d alguma forma. Grande abraço. Bons estudos.

5
  • Sim, mas você na verdade contornou o problema. Compilar o LESS pra CSS é o recomendado em produção. A outra técnica (processar o LESS no cliente) é boa para desenvolvimento.
    – bfavaretto
    Commented 12/12/2014 às 20:41
  • A maneira que fiz é errada/não recomendada? Porque foi a maneira que eu achei de fazer isso funcionar. Commented 16/12/2014 às 19:38
  • Não é errada, é a maneira que se deve usar em produção. Nesse caso, você nem precisa do JS do LESS, porque o arquivo já está compilado. Só dá um pouco mais de trabalho durante o desenvolvimento, já que precisa compilar antes de cada teste. Eu disse que você contornou porque não resolve o que você perguntou, que é interpretar o LESS dinamicamente no cliente (browser).
    – bfavaretto
    Commented 16/12/2014 às 19:52
  • Minha esperança ainda é que funcione em um servidor online, mas ainda não deu pra fazer esses testes. Por enquanto, pra aprender a linguagem, acho que da pra quebrar o galho. Commented 17/12/2014 às 17:37
  • vai funcionar sim. Quando você compila o LESS localmente e manda linka o CSS no HTML, não tem mais LESS na jogada. Não tem por que não funcionar :)
    – bfavaretto
    Commented 17/12/2014 às 18:56
0

Tente utilizar o grunt ou gulp ambos podem garantir a compilação do seu less e várias outras coisas importantes como garantir que seu código está escrito de forma correta. É algo simples mais poderoso, além de compilar seu less, você pode concatenar ou minifica-los.

1
  • Estou compilando direto pelo Sublime. Algum plugin(não sei exatamente qual dos que instalei), está fazendo compilando pra mim. Commented 16/12/2014 às 19:45
0

Para isso você precisa baixar o download less.js e incluí-lo em um tag no elemento da sua página:

<script src="less.js" type="text/javascript"></script>
  • Certifique-se de incluir suas .less antes do script acima.
  • Quando você vincula mais de uma .less cada uma delas é compilada de forma independente, ou seja, qualquer variavel, mixins ou namespaces que você define em uma não são acessiveis em outra.
1
  • A ordem das tags está certinha. Já havia me atendado para isso tb. Commented 16/12/2014 às 19:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .