Continuando nossa série de artigos sobre opções para trabalhar com CSS´s dinâmicos, precisamos comentar soluções como o SASS (Syntactically Awesome Stylesheets) que como o próprio nome diz, é uma sintaxe incrível para se escrever suas folhas de estilo CSS. Apesar de parecer complicado para a maioria dos desenvolvedores familiarizados com tecnologias Microsoft, após montar o ambiente instalando o Ruby e a biblioteca do SASS, não há segredo algum para utilizar a pré-compilação em Ruby.

1 – Primeiramente, temos que baixar o instalador o Ruby no portal oficial (rubyinstaller.org). É preciso apenas tomar cuidado para marcar as opções “add ruby executables to your PATH” e “Associate .rb and .rbw file…” como mostrado abaixo.

image-01

2 – Após consluir a instalação do Ruby, você precisa instalar a biblioteca do SASS. Para isso, abra um console. Se já tiver o GitBash instalado, pode usá-lo para instalar o SASS, caso contrário pode usar o prompt de comando normal do windows. Abra o prompt ou o bash e digite o comando:

gem install sass

Após executar o comando você deve ver uma mensagem como mostrado abaixo.

No Bash

image-02

E no Prompt do Windows

image-03

Recebendo a mensagem de sucesso. Estamos prontos para começar. Crie um arquivo “.scss” numa pasta qualquer do seu projeto. Neste arquivo você escreverá todas as definições do seu CSS, porém utilizando a sintaxe do SASS, que é bem parecida com a sintaxe do LESS, que já exploramos em artigos anteriores. Os principais recursos que você deve conhecer são:

Aninhamento das classes

É comum quando vamos escrever uma folha de estilo ter várias definições começando com o mesmo “radical”, como por exemplo: #menu, #menu li, #menu li a, #menu span etc… nestes casos, o SASS nos permite organizá-los hierarquicamente assim:

/* style.scss */
#menu {
  background: #FFF;
  border: solid 1px #CCC;
  list-style-type: none;
  li {
    float: left;
    a {
		font-weight: bold;
	}
  }
}

O resultado:

/* style.css */
#menu {
  background: #FFF;
  border: solid 1px #CCC;
  list-style-type: none; }
  #menu li {
    float: left; }
    #menu li a {
      font-weight: bold; }

Podemos inclusive fazer referência às pseudo-classes hover usando o “&” (e comercial).

/* style.scss */
a {
  color: #000;
  &:hover { color: #FF3300; }
}

O resultado:

/* style.css */
a {
  color: #000; }
  a:hover {
    color: #FF3300; }

Variáveis

Assim com no LESS, podemos declarar variáveis e reutilizar estes valores em qualquer lugar da nossa folha de estilos facilmente. Para isso nós utilizamos o $ (‘dólar’).

/* style.scss */
$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

O resultado é:

/* style.css */
#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid; }

a {
  color: #ce4dd6; }
  a:hover {
    border-bottom: solid 1px; }

Você pode inclusive usar estas variáveis na definição das classes para alterar por exemplo, a aplicação de uma borda top para bottom.

/* style.scss */
$side: top;
$radius: 10px;

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

Gerando isso:

/* style.css */
.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

Combinações

Essa é a minha “feature” preferida, pois permite que você misture e crie variações de suas classes facilmente, reutilizando um bloco de código definido por um @mixin.

/* style.scss */
@mixin rounded-top {
  $side: top;
  $radius: 10px;

  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded-top; }
#footer { @include rounded-top; }

O resultado do arquivo compilado é:

/* style.css */
#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

Após escrever seu arquivo, você pode “compilar” seu arquivo “.scss” em um arquivo “.css”. Usando o comando:

sass –watch {nome do arquivo}.scss:{nome do arquivo que será gerado}.css

ficando assim:

sass –watch styles.scss:styles.css

E o arquivo final será gerado na sua pasta. Uma dica é abrir o command já na pasta onde o arquivo SCSS está, usando o “SHIFT” e clicando com o botão direito na área da pasta. Uma opção “Abrir janela de comando aqui” vai aparecer.

image-04

O legal é que você pode executar este comando de “compilação” logo ao criar o arquivo e toda vez que você modificá-lo e salvá-lo o Ruby irá gerar o arquivo “.css” para você apontando inclusive falhas na sintaxe. Muito Legal!!!!

É claro que neste caso, você irá linkar no seu html, diretamente o arquivo .CSS final, sem necessidade de nenhum processamento no cliente.

Não deixe de acessar também o site do projeto e o tutorial original, pois existem outros exemplos que não foram mostrados aqui. E gostaria de registrar também, um obrigado aos meus amigos de Porto Alegre… Diego Plentz, Gregorio Kusowski e Pedro Nascimento por me apresentarem o SASS e o Ruby.

Um abraço e até a próxima.