17 de julho de 2013

CSS - Como instalar e usar o SASS no Linux Ubuntu

Existem muitos artigos explicando sobre Sass, por isso aqui vamos fazer apenas um resumo.
Basicamente o Sass nos permite criar variáveis, incorporar o estilo de outras classes e aninhar propriedades. Tudo isso apenas com CSS.
O Sass funciona assim:
Você cria um arquivo com extensão .scss executa o Sass e ele gera um .css a medida que altera o .scss, veja o exemplo no final do post.

Instalando:

Você precisará do Ruby para executar o Sass, para isso, vamos remover qualquer versão que esteja instalada:
sudo apt-get remove ruby*

Instalar a versão 1.8 (foi o que funcionou para mim)
sudo apt-get install ruby1.8

Instalar o instalador de Gems do Ruby:
sudo apt-get install rubygems

E por fim, instalar o Sass:
sudo gem install sass


Preparando o arquivo:

estilo.scss
$p: #000000;
$m: 15px;

.content {
  color: $p;
  .interno {
    margin: $m;
  }
}


Executando:

Execute o Sass:
sass --watch estilo.scss:estilo.css

Ele vai gerar um estilo.css parecido com isso:
.content {
  color: black; }
  .content .interno {
    margin: 15px; }

É possível fazer com que o Sass monitore uma pasta inteira. Vamos supor que todos os seus .scss estejam na pasta SCSS e todos os seus .css estejam na pasta CSS, execute o Sass assim:
sass --watch scss:css

Ficou na dúvida em usar o Sass?
Fonte:http://sass-lang.com/

Nenhum comentário:

Postar um comentário