Início
Loja
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
INTRODUÇÃO
LESS estende CSS com comportamento dinâmico como variáveis, mixins, operações e funções. LESS roda tanto no cliente (Chrome, Safari, Firefox) quanto no servidor, usando Node.js e Rhino.
VARIÁVEIS
Variáveis permitem que você especifique valores amplamente utilizados em apenas um local, possibilitando assim reutilizá-las por toda sua folha de estilos, realizando mudanças globais de maneira tão fácil como alterar apenas uma linha de código.
O código em LESS
- Código:
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
Código Compilado
- Código:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
MIXINS
Mixins permitem que você adicione todas as propriedades de uma classe em outra classe simplesmente incluindo o nome da classe como uma de suas propriedades. Assim como variáveis, mas para classes completas. Mixins também podem se comportar com funções, e receber argumentos.
Código em LESS
- Código:
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Código Compilado
- Código:
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
REGRAS ANINHADAS
Ao invés de construir longos nomes de seletores para especificar herança, em LESS você pode simplesmente aninhar seletores dentro de outros seletores. Isto faz com que a herança fique mais clara e as folhas de estilos menores.
O código em LESS
- Código:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Código Compilado
- Código:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
USANDO LESS
Já que LESS é um pré-processador de CSS e não uma linguagem em si, não podemos simplesmente abrir um arquivo .less e depois de fazer o código incluir na página e querer que funcione.
Compilando direto do navegador
Você pode fazer o código ser compilado assim que usuário acessa a página
Mas para isso terá de baixar o "complemento" [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
O download é feito direto do site, e como é javascript, não é necessário scan.
Logo depois inclua sua folha de estilos LESS e depois o less.less
- Código:
<script src="less.js" type="text/javascript"></script>
Para incluir o LESS o código é o mesmo que o CSS normal, alterando apenas poucas coisas.
- Código:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Lembrando claro, que o formato da folha tem de ser .less (Óbvio)
Também quero lembrar que, como já dito acima, o LESS vai ser compilado quando o usuário acessar a página. Ou seja, posso dizer que vai atrasar um pouco o carregamento.
Bom, se você acha que não vai poder usar LESS porque vai atrasar seu site, trago aqui um compilador de less para WINDOWS.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
O programa é bem fácil de usar, então não explicarei como 
Se não quiser baixá-lo para compilar o LESS, o site proporciona um compilador online
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
É isso, espero que tenham entendido o que é o LESS e para que ele serve.
Créditos ~
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- ϟFish3r
Se você veio aqui só para comentar que o tutorial é puro Copiar & Colar, faça o favor de não comentar sem se informar.
Última edição por ϟFish3r em Qui Jul 10, 2014 11:45 pm, editado 1 vez(es)
