{"id":2683,"date":"2013-08-05T13:57:16","date_gmt":"2013-08-05T15:57:16","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2683"},"modified":"2015-05-14T19:02:24","modified_gmt":"2015-05-14T21:02:24","slug":"less-programando-no-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/less-programando-no-css","title":{"rendered":"LESS: Programando no CSS"},"content":{"rendered":"
\"Como
Introdu\u00e7\u00e3o ao LESS<\/figcaption><\/figure>\n

Usando LESS para criar suas folhas de estilos \u00e9 poss\u00edvel deixar seu CSS muito mais din\u00e2mico<\/strong>. J\u00e1 imaginou usar vari\u00e1veis dentro da sua folha de estilos, ou melhor ainda, usar fun\u00e7\u00f5es iguais as que usamos quando estamos programando em PHP, JAVA, etc. A boa not\u00edcia \u00e9 que com a ajuda de LESS n\u00f3s podemos.
\n
\nLESS acrescenta funcionalidades din\u00e2micas para seu CSS<\/strong> e cada dia est\u00e1 sendo aprimorado e ficando mais r\u00e1pido; ele introduz a possibilidade de usar vari\u00e1veis, opera\u00e7\u00f5es e fun\u00e7\u00f5es na sua folha de estilo. Para quem j\u00e1 trabalha com CSS e tem uma no\u00e7\u00e3o b\u00e1sica de programa\u00e7\u00e3o se dar\u00e1 muito bem no aprendizado.<\/p>\n

Usando LESS<\/h2>\n

Abaixo duas imagens que demostram o c\u00f3digo LESS e o CSS:
\n\"Exemplo<\/p>\n

\"Exemplos
Exemplo c\u00f3digo LESS e CSS<\/figcaption><\/figure>\n

Como usar o LESS:<\/h2>\n

Com JavaScript<\/h3>\n

Podemos usar um arquivo javascript onde a compila\u00e7\u00e3o vai ser feita de forma autom\u00e1tica. Basicamente esse arquivo interpreta as fun\u00e7\u00f5es, vari\u00e1veis do LESS e a cada carregamento da p\u00e1gina o arquivo JS faz a compila\u00e7\u00e3o do arquivo LESS.<\/p>\n

Fa\u00e7a o download do arquivo JavaScript no site oficial do LESS<\/a>.<\/p>\n

\r\n<link rel="stylesheet\/less" type="text\/css" href="style.less">\r\n<script src="less.js" type="text\/javascript"><\/script>\r\n<\/pre>\n
\u00c9 poss\u00edvel usar o link da biblioteca do Google para chamar o JavaScript:<\/p>\n
\r\n<script src="http:\/\/lesscss.googlecode.com\/files\/less-1.0.18.min.js"><\/script> \r\n<\/pre>\n
\nCertifique-se de linkar seu arquivo LESS antes do arquivo javascript. O navegador precisa baixar primeiro o arquivo feito em LESS para depois o JavaScript  reconhecer o LESS e fazer a convers\u00e3o. Perceba tamb\u00e9m que a extens\u00e3o da folha de estilos \u00e9 less e n\u00e3o css.\n<\/div>\n
Compilar o arquivo LESS<\/h3>\n
A outra maneira \u00e9 fazer a compila\u00e7\u00e3o do arquivo LESS. Voc\u00ea monta todo o c\u00f3digo LESS e depois o converte para o tradicional CSS. Depois de convertido \u00e9 s\u00f3 copiar o que foi gerado pelo compilador e colar o c\u00f3digo na sua folha de estilos<\/strong>, simples n\u00e3o?<\/p>\n
Existem programas para fazer isso, e at\u00e9 online mesmo \u00e9 poss\u00edvel fazer. No http:\/\/winless.org\/<\/a> voc\u00ea pode baixar o compilador ou converter o c\u00f3digo no pr\u00f3prio site. No site less2css<\/a> tamb\u00e9m \u00e9 poss\u00edvel fazer essa convers\u00e3o.<\/p>\n
LESS em a\u00e7\u00e3o<\/h2>\n
Vari\u00e1veis<\/h3>\n
As vari\u00e1veis funcionam de forma semelhante como nas linguagens de programa\u00e7\u00e3o. Usamos as vari\u00e1veis para armazenar algum valor<\/strong>, logo usamos a vari\u00e1vel em vez de usarmos o valor em si.<\/p>\n
\r\n@header-font: Georgia;\r\nh1, h2, h3, h4 {\r\n    font-family: @header-font;\r\n}\r\n.large {\r\n    font-family:@header-font;\r\n}\r\n<\/pre>\n
No exemplo acima usamos uma vari\u00e1vel chamada @header-font<\/em> (perceba a presen\u00e7a do ‘@’ antes do nome da vari\u00e1vel) e atribu\u00edmos a ela o valor Georgia<\/em>. A partir de agora podemos usar sempre essa vari\u00e1vel para atribuir a fonte Georgia<\/em>. Abaixo um exemplo de uso de vari\u00e1veis com cores.<\/p>\n
\r\n@default-color: #4D926F;\r\n\r\n#header {\r\n  color: @default-color;\r\n}\r\n\r\nh2 {\r\n  color: @default-color;\r\n}\r\n<\/pre>\n
Outro exemplo:<\/strong><\/p>\n
\r\n@color: #222222;\r\na {\r\n    @color: #ffffff;\r\n    color:@color;\r\n}\r\nbutton {\r\n    background: @color;\r\n}\r\n<\/pre>\n
No exemplo acima o LESS n\u00e3o ser\u00e1 convertido. Por qu\u00ea? Perceba que a vari\u00e1vel  @cor foi criada dentro de uma regra CSS, logo ela s\u00f3 ser\u00e1 vista dentro daquela regra. A vari\u00e1vel n\u00e3o \u00e9 acess\u00edvel fora deste escopo. Caso voc\u00ea defina uma vari\u00e1vel no inicio do seu arquivo LESS (fora das regras CSS) est\u00e1 fica dispon\u00edvel para qualquer regra CSS. Isso \u00e9 o conceito de escopo<\/strong>.<\/p>\n
Opera\u00e7\u00f5es<\/h3>\n
Voc\u00ea pode definir um valor para uma vari\u00e1vel e usar  o valor dessa vari\u00e1vel para multiplicar, dividir, subtrair ou somar com outros valores, veja o exemplo abaixo:<\/p>\n
\r\n.button{\r\n    @unit: 3px;\r\n    border:@unit solid #ddd;\r\n    padding: @unit * 3;\r\n    margin: @unit * 2;\r\n}\r\n<\/pre>\n
Voc\u00ea pode usar esse conceito para alterar o valor de uma cor, veja:<\/p>\n
\r\n@color-button: #d24444;\r\ninput.submit {\r\n    color:#fff;\r\n    background:@color-button;\r\n    border:1px solid @color-button - #222;\r\n    padding:5px 12px;\r\n}\r\n<\/pre>\n
O C\u00f3digo acima cria um bot\u00e3o vermelho que tem uma borda um pouco mais escura. Isso ajuda pois n\u00e3o precisamos definir a cor da borda em separado. Caso queira mudar o bot\u00e3o para outra cor, \u00e9 s\u00f3 mudar a cor do bot\u00e3o que a\u00e7or da borda ser\u00e1 mudada de acordo com a cor do bot\u00e3o.<\/p>\n
Outra vantagem \u00e9 no uso de gradientes, veja:<\/strong><\/p>\n
\r\n@color: #faa51a;\r\n.button {\r\n    background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515));\r\n    background: -moz-linear-gradient(top,  @color + #151515,  @color - #151515);\r\n}\r\n<\/pre>\n
Aninhamento de regras<\/h3>\n
Veja como seria feito com CSS<\/p>\n
\r\n#header { color: black; }\r\n#header .navigation {\r\n  font-size: 12px;\r\n}\r\n#header .logo {\r\n  width: 300px;\r\n}\r\n#header .logo:hover {\r\n  text-decoration: none;\r\n}\r\n<\/pre>\n
Em LESS podemos fazer da seguinte forma (perceba que temos uma regra dentro de outra regra).<\/p>\n
\r\n#header {\r\n  color: black;\r\n\r\n  .navigation {\r\n    font-size: 12px;\r\n  }\r\n  .logo {\r\n    width: 300px;\r\n    &amp;amp;amp;:hover { text-decoration: none }\r\n  }\r\n}\r\n<\/pre>\n
Mixins<\/h3>\n
Resumindo:<\/strong> Voc\u00ea pode usar uma declara\u00e7\u00e3o CSS dentro de outra. Veja o exemplo abaixo<\/p>\n
\r\n.rounded_top {\r\n    -webkit-border-top-left-radius: 6px;\r\n    -webkit-border-top-right-radius: 6px;\r\n    -moz-border-radius-topleft: 6px;\r\n    -moz-border-radius-topright: 6px;\r\n    border-top-left-radius: 6px;\r\n    border-top-right-radius: 6px;\r\n}\r\n.tab {\r\n    background: #000;\r\n    color:#fff;\r\n    .rounded_top;\r\n}\r\n.submit {\r\n    .tab;\r\n    background: red;\r\n}\r\n<\/pre>\n
No c\u00f3digo acima definimos uma classe .rounded_top<\/em> que serve para arredondar os cantos na parte superior. Acrescentamos toda essa regra dentro da regra .tab<\/strong> (colocamos uma classe dentro de outra) A classe .tab<\/em> al\u00e9m do fundo preto e letras brancas ter\u00e1 tamb\u00e9m os cantos arredondados na parte superior. E se n\u00e3o pastasse, dentro da regra .submit<\/em> colocamos a regra .tab<\/em>, que na verdade \u00e9 a classe .tab<\/em> com uma jun\u00e7\u00e3o da classe .rounded_top<\/em>. Fant\u00e1stico, n\u00e3o?!<\/p>\n
Fun\u00e7\u00f5es em LESS<\/h3>\n
Se voc\u00ea j\u00e1 programou em qualquer linguagem de programa\u00e7\u00e3o est\u00e1 careca de saber o que \u00e9 uma fun\u00e7\u00e3o. Agora podemos usar esse conceito no CSS. Veja o exemplo abaixo e a seguir o coment\u00e1rio do c\u00f3digo.<\/p>\n
\r\n.rounded_top(@radius) {\r\n    -webkit-border-top-left-radius: @radius;\r\n    -webkit-border-top-right-radius: @radius;\r\n    -moz-border-radius-topleft: @radius;\r\n    -moz-border-radius-topright: @radius;\r\n    border-top-left-radius: @radius;\r\n    border-top-right-radius: @radius;\r\n}\r\n.tab {\r\n    background: #333;\r\n    color:#fff;\r\n    .rounded_top(6px);\r\n}\r\n.submit {\r\n    .rounded_top(3px);\r\n}\r\n<\/pre>\n
A regra .rounded_top(@radius)<\/em> \u00e9 uma fun\u00e7\u00e3o, veja que nas regras abaixo chamamos as fun\u00e7\u00f5es passando os par\u00e2metros 6px e 3px.<\/p>\n
Podemos passar um par\u00e2metro padr\u00e3o para a fun\u00e7\u00e3o, veja:<\/p>\n
\r\n.rounded_top(@radius:6px) {\r\n    -webkit-border-top-left-radius: @radius;\r\n    -webkit-border-top-right-radius: @radius;\r\n    -moz-border-radius-topleft: @radius;\r\n    -moz-border-radius-topright: @radius;\r\n    border-top-left-radius: @radius;\r\n    border-top-right-radius: @radius;\r\n}\r\n.tab {\r\n    background: #333;\r\n    color:#fff;\r\n    .rounded_top;\r\n}\r\n.submit {\r\n    .rounded_top(3px);\r\n}\r\n<\/pre>\n
Na regra .tab<\/em> ser\u00e1 acrescentado a regra .rounded_top<\/em> como foi definida, ou seja, arredondamento de 6px j\u00e1 que n\u00e3o passamos par\u00e2metro algum. J\u00e1 na regra .submit<\/em> o arredondamento foi alterado para 3px.<\/p>\n
Namespaces<\/h3>\n
Namespaces<\/strong> podem ser usados \u200b\u200bpara organizar o nosso CSS, permitindo-nos criar grupos de estilos. Como se fosse um encapsulamento das regras CSS.<\/p>\n
\r\n#defaults {\r\n\t.nav_list () {\r\n\t\tlist-style: none;\r\n\t\tmargin: 0; padding: 0;\r\n\t}\r\n\t.submit {\r\n        background: red;\r\n        color: white;\r\n        padding:5px 12px;\r\n    }\r\n\tp {\r\n        margin: 12px 0;\r\n    }\r\n}\r\n\r\n.submit_button {\r\n    #wrapper > .submit;\r\n}\r\n<\/pre>\n
No exemplo acima temos um “pacote” chamado #defaults<\/em>. Logo, aplicamos o estilo .submit<\/em> a classe .submit_button<\/em> que receber\u00e1 apenas a regra passada a ela.<\/p>\n
LESS n\u00e3o \u00e9 a sua \u00fanica op\u00e7\u00e3o para um pr\u00e9-processador CSS<\/strong> . A outra op\u00e7\u00e3o popular \u00e9 Sass<\/a>. A maior vantagem do LESS \u00e9 que ele usa uma sintaxe mais pr\u00f3xima do CSS.<\/p>\n
Para encerrar deixo um v\u00eddeo para voc\u00eas acompanharem alguns exemplos do LESS sendo usado. O v\u00eddeo est\u00e1 em ingl\u00eas mas s\u00f3 olhando j\u00e1 da para entender muita coisa.<\/p>\n