anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

A Maravilha do LESS CSS

Logo LESS CSS

Logo LESS CSS

A um tempo os desenvolvedores front end vêm reclamando que o trabalho está muito repetitivo, pois com o CSS 3 surgiram vários atributos novos que ainda não funcionam em todos os browsers, logo temos que fazer isso funcionar em todos eles gerando um trabalho muito cansativo!

Abaixo darei um exemplo da propriedade transition do CSS 3:

.seu-elemento-html{
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
 }

Agora imagine fazer tudo isso para todos os elementos que forem necessários, digitar as mesmas linhas. Isso cansa só de pensar….

 

O que é LESS?

Bom, o LESS veio para acabar com todo este cansaço! Com o LESS, podemos agilizar muito o trabalho, pois ele nos possibilita criar variáveis e funções que podem ser reutilizadas a qualquer momento no seu CSS !

Exemplo de variável no LESS:

 

@nome-da-variavel: Valor;
 @cor-do-titulo: #F56;

 

Bom, agora a pergunta é como incluir essa variável no CSS…

Primeiro que para vincular o arquivo LESS no HTML é um pouco diferente. Vamos lá:

 

<link rel="stylesheet/less" href="pasta/arquivo.less" type="text/css" media="all">

 

Bom com o arquivo vinculado basta chamar a variável deste modo:

 

.titulo-do-texto{
        color: @cor-do-titulo;
 }

 

Tá sei que vocês devem estar dizendo, ahh mas eu estou digitando mais caracteres que o normal, pois antes eu digitava apenas o hexadecimal da cor.
Bom, a questão aqui é o reaproveitamento de códigos, pois você não precisa decorar o hexadecimal e sim somente o nome da variável !!!

Agora vamos ao exemplo da transition que foi citada acima:

Acima você já viu o trabalho que da para criar transitions…
Agora veremos como criamos e chamamos funções no LESS CSS.

 

Sintaxe da função

.nome-da-funcao(){
transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
 }

 

Como Chamar a Função

.seu-elemento-html{

 .nome-da-funcao();
 }

 

Pronto!!!! Seu transition que antes lhe custava 5 linhas e agora você faz a mesma coisa em 1 linha :)

Caso você queira saber sobre o LESS CSS acesse:
http://lesscss.org


 Sobre minAutor do Post

Ivan Lanza, 22 anos, casado, formado pelo SENAC SP como Desenvolvedor Web, Certificado pela W3C em HTML 5 e CSS 3, Google Design Pattern e Certificado pela Apple Como Apple Genius e iOS Senior Developer. Sou instrutor de Web em São Caetano do Sul há 3 anos e 6 meses e no restante das horas vagas trabalho como freelancer home office para outras empresas.

Facebook: https://www.facebook.com/Lanzaivan1

 

Próximo

Postado por

Postagem Relacionada

frontend-e-back-end
A arte do design front-end
 O que é Front-End? Segundo o Wikipédia: Em ciência da computação, Ambos são termos generalizados que