Dica para CSS (Usando SASS ou LESS) | Galaxyz do Brasil
You Are Here: Home » Desenvolvimento » Web 2.0 » CSS » Dica para CSS (Usando SASS ou LESS)
Dica para CSS (Usando SASS ou LESS)
Posted by :admin Posted date : 28 de agosto de 2013 In CSS, Design de Interação, Empreendedorismo, Javascript 0
Hoje eu venho com uma dica para o desenvolvimento de CSS.
Vamos imaginar a seguinte situação: Supondo que você desenvolveu um belo site usando CSS com tema baseado em vários tons de verde, mas um dia o seu cliente pediu para mudar para tons de azul.
Você pega seu belo arquivo de CSS que contém mais de 2000 linhas e começa a alterar as cores, certo? O maior problema é a quantidade de vezes que tem que ser alterado a cor, e o pior, dependendo, você tem que descobrir qual seria um tom mais forte ou mais fraco para substituir os outros tons de azul.
Usando a situação de cima, você levaria no mínimo um dia para acertar todas as cores como deveriam, correndo o risco de esquecer em algum lugar de alterar.
Pensando nisso, foram criados alguns recursos para facilitar um pouco a vida: SASS e LESS.
Esses recursos não substituem o CSS, mas facilita a geração de CSS, pois você adiciona alguns recursos de linguagem de programação ao CSS, como exemplo:
Herdar características de um outro CSS;
O SASS e o LESS possuem características muitos parecidas, mas no momento o SASS possui alguns recursos extras.
Também existem alguns frameworks para facilitar mais ainda, como exemplo, funções predefinidas para vários usos, como gerar borda redonda, degrade, transparência.
Para o SASS:
Para o LESS:
http://centage.peruste.net/
Aqui dois links com alguns exemplos:
http://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass
http://www.eduardocs.com/artigos/CSS-dinamico-com-SASS.html
http://tableless.com.br/css-dinamico-com-less/#.UbYBe_m1GIo
Uma vez feito o código utilizando esses recursos, para resolver a historinha de cima, bastaria alterar algumas poucas variáveis e mandar gerar o CSS novamente e pronto, um trabalho que levaria um dia é feito em menos de 5 minutos.
Tanto para o SASS e o LESS, existem opções para converter o CSS para o formato deles.
Para o Netbeans, existe essa extensão http://plugins.netbeans.org/plugin/34929, com ela você consegue editar e "compilar o CSS", também existe uma opção de compilar ao salvar.