Instalando o Less

Veja como instalar e utilizar o LessCSS em sua máquina:

Windows

Pré-Requisitos

+ Ruby

Para utilizar o LessCSS em sua máquina, devemos ter instalado o compilador do Ruby. Se já tem instalado, pode pular este passo. Para instalá-lo, siga os passos:

1) Fazendo o download:

Acesse a página oficial do Ruby, entre na opção Downloads, desça até o quadro Ruby Em Windows e selecione a opção que desejar. Se sentir inseguro quanto a isso, aconselho utilizar o instalador Ruby 1.8.6 One-Click Installer.

2) Instalando:

Após ter efetuado o donwload do compilador, execute-o e siga as instruções da instalação. O diretório padrão de instalação é C:\ruby.

+ Less

Após ter instalado o compilador do Ruby, devemos instalar o pacote Less, que é a raiz da programação do LessCSS. Para isso, abra o Prompt de Comando e digite:

1	gem install less

Se a instalação ocorrer como deveria, após aparecer algumas mensagens que pertencem a instalação, deverá aparecer algo como “1 gem installed”.

Pronto, tendo instalado esses dois itens, estamos prontos para utilizar o LessCSS.

A Linguagem LessCSS

Como uma extensão do CSS, Less não é só compatível com o CSS, mas também adiciona recursos extras à sintaxe padrão do CSS. Isso torna a aprendizagem do Less bastante suave e, em caso de problemas, você pode retornar ao CSS padrão.

Variáveis

As variáveis são declaradas com o seguinte escopo:

1	@variavel: valor;

O exemplo a seguir é auto-explicativo o suficiente:

1
2
3
4

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

O CSS resultante disso será:

1	#header { color: #6c94be; }

Note que as variáveis do Less são, na verdade, constantes, pois é permitido sua definição apenas uma vez.

Heranças

As heranças são uma forma de incluir, ou misturar, definições de dois ou mais estilos, fazendo com que um estilo herde todas as características em um outro estilo. Por exemplo, temos a classe .bordered:

1
2
3
4

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

E nós queremos utilizar este estilo dentro de outros estilos. Bom, basta nós herdamos tal classe dentro das quais nós queremos utilizá-la. Veja dois exemplos:

1
2
3
4
5
6
7
8
9

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}

Todas as propriedades que definimos na classe .bordered estão definidas também nos estilos #menu a e no .post a. O CSS de saída deste código será:

1
2
3
4
5
6
7
8
9
10
11

#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

Note que, além de herdamos as propriedades de um estilo, podemos adicionar novos, como neste caso foi feito para a cor da fonte.

Estilos Alinhados (Em Cascata)

O Less dá a você a habilidade de criar estilos de forma encadeada, também chamada de estilos em cascata, para criar boas combinações. Veja um exemplo de um código em CSS padrão:

1
2
3
4
5
6
7
8
9
10

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}

Com o Less, você obtém o mesmo resultado fazendo:

1
2
3
4
5
6
7
8
9
10
11

#header {
color: black;

.navigation {
font-size: 12px;
}
.logo {
width: 300px;
:hover { text-decoration: none }
}
}

O código resultante é mais conciso e imita a estrutura de seu HTML. Por curiosidade, o código em Less acima, após compilado, retorna o seguinte CSS:

1
2
3
4

#header { color: black; }
#header .navigation { font-size: 12px; }
#header .logo { width: 300px; }
#header .logo:hover { text-decoration: none; }

Veja que é idêntico ao CSS padrão, mas, na forma Less, é muito mais intuitivo trabalhar.

Operações

Qualquer número, cor ou variável pode ser operado. Veja um exemplo:

1
2
3
4
5
6
7

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

A saída é exatamente o que se é esperado – Less entende a diferença entre cores e unidades. Se você efetuar uma operação como:

1	@var: 1px + 5;

Less entenderá que a saída deverá ser com a unidade px – que neste caso seria 6px.

Nomes de Espaço e Assessores

Algumas vezes queremos organizar nossos estilos em blocos, diferenciando-os de outros estilos com mesmo nome. Para isso, podemos utilizar os espaços de nomes (“Namespaces”, no inglês). Por exemplo, pretendemos definir algumas classes de estilo sob o nome de espaço #bundle, ficando:

1
2
3
4
5
6
7
8
9
10

#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}

Se precisássemos utilizar o estilo .button nos elementos #header a, poderíamos fazer:

1
2
3
4

#header a {
color: orange;
#bundle > .button;
}

Nota: onde há o código & gt; considere o caractere >. Nosso plugin está com um pequeno defeito e não exibe corretamente.

Perceba que, neste caso, #bundle não faz referencia a um id, mas, sim, cria um espaço de nome.

O Less também permite que você acesse propriedades ou variáveis específicas de diferentes estilos. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11

#defaults {
@width: 960px;
@color: black;
}

.article { color: #294366; }

.comment {
width: #defaults[@width];
color: .article['color'];
}

As variáveis e os assessores são sinônimos quando são utilizados para acessar seus valores, use o qual considerar melhor.

Escopo

O escopo no Less é semelhante ao das linguagens de programação. Variáveis e estilos alinhados são, primeiramente, buscados localmente; se não encontrados, o compilador busca em seu escopo pai e assim em diante.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@var: red;

#about {
@var: white;
#header {
color: @var; // white
}
}

#contact {
#header {
color: @var; // red
}
}

Veja o código acima. Na linha 1 declara-se a variável @var. Na linha 4, dentro do escopo #about, redeclara-se a variável e utilizamos-a na linha 6. Pela regra do escopo, o valor que será utilizado na linha 6 será o atribuído na linha 4. Já, quando a utilizamos na linha 12, refere-se ao valor atribuído na linha 1. Isso, pois, quando a redefinimos na linha 4, o valor white vale apenas no escopo #about; enquanto o valor red vale para todo o resto.

Comentários

Segue o padrão da linguagem C e comentários em linha:

1
2
3
4
5

/* One hell of a comment */
@var: red;

// Get in line!
@var: white;

Importando Arquivos

Ao importar um arquivo .less, todas as variáveis e escopo que nele são definidos estarão disponíveis no arquivo corrente. Se importar um arquivo .less, a extensão é opcional:

1
2
3

@import "library";
@import "layout.less";
@import "typo.css";

Compilando o Código Less

Compilação Direta

Para compilar nosso código Less é muito simples. Basta digitar o seguinte comando em seu prompt:

1	lessc source [destination]

Onde source representa o arquivo .less a ser compilado e o destination é o arquivo destino, comumente com extensão .css.

Suponha que temos um arquivo chamado style.less, salvo no diretório C:/site/css/style.less.

1) Abra o Prompt de Comando:

Vá em Iniciar, Todos os Programas, Prompt de Comando.

2) Compilando:

Digite o seguinte comando:

1	lessc c:/site/style.less

Se não exibir nenhuma mensagem, a compilação foi efetuada com sucesso e foi gerado o arquivo style.css com o código resultante no mesmo diretório.

Uma maneira semelhante é informar o arquivo destino:

1	lessc c:/site/style.less c:/site/style.css

Ou ainda, caso deseja um nome diferente para o CSS:

1	lessc c:/site/style.less c:/site/new-style.css

Compilação em Tempo Real

Após criar o arquivo .less, você pode efetuar a compilação em tempo real. A cada alteração no arquivo, o compilador é chamado e é recriado o arquivo .css. Para isso, basta utilizar o comando –watch ao final do comando.

1	lessc c:/site/style.less --watch

Deixando o Prompt de Comando aberto, toda vez que eu salvar o arquivo .less, o compilar recriará o arquivo .css de acordo com as novas alterações. Quando utilizar o comando –watch, deverá aparecer a mensagem:

1	* Watching for changes in c:/site/style.less... Ctrl+C to abort.

E quando salvar o arquivo .less, deverá exibir a mensagem:

1	Change detected... [32m* Updated [39m* style.css

É isso!

Espero que gostem do artigo e que façam bons proveitos da ferramenta.
Qualquer dúvida, deixe nos comentários. Ajudarei no que for possível.

Referência

- Documentação oficial do Less

Categorias:

Etiquetas:

css design less lesscss otimização ruby Tableless

Comentários (1)

Trackbacks/Pingbacks (0)

1ºTagliatti escreveu:
Responder

Realmente muito bom o post, vou começar a estudar o less, vale muito a pena.
Parabéns pelo post.

terça-feira, 07 de junho de 2011 às 15:36 www.criandowebsite.com/

Este post ainda não possui Pingbacks ou Trackbacks

webARTz - Onde a WEB encontra a ARTE

LessCSS – Saiba Como Utilizar

Instalando o Less

Windows

Pré-Requisitos

+ Ruby

1) Fazendo o download:

2) Instalando:

+ Less

A Linguagem LessCSS

Variáveis

Heranças

Estilos Alinhados (Em Cascata)

Operações

Nomes de Espaço e Assessores

Escopo

Comentários

Importando Arquivos

Compilando o Código Less

Compilação Direta

1) Abra o Prompt de Comando:

2) Compilando:

Compilação em Tempo Real

É isso!

Referência

Sobre o Autor

Anderson Carlos Woss

Você pode gostar de ver também:

Sugestões de Links no Ocioso:

Comentários (1)

Trackbacks/Pingbacks (0)

1ºTagliatti escreveu:

Faça seu Comentário

Podcast webARTz

Acesso ao webARTz

Nuvem de Tags

Publicidade

Arquivo webARTz

webARTz - Onde a WEB encontra a ARTE