MDM Studio | Responsive Design
Compartilhe esta notícia no Facebook

Instalando o SaSS como Pre Processador de CSS

Conheça um pouco mais sobre SaSS, o pre processador de CSS. Neste artigo vamos comentar em etapas sobre o que é necessário para instalar e trabalhar com o SaSS e detalhar cada uma delas.

Instalando o SaSS como Pre Processador de CSS

É fundamental para nós desenvolvedores, programadores e afins (os famosos carinhas da web), estarmos sempre atualizados e antenados a novas tecnologias e metodologias de escrita de código. Porém, em meio a tantas informações e novidades, as vezes fica difícil encontrar alguma que realmente vai fazer diferença em nossas vidas.

Sendo assim, decidi escrever este artigo, onde vou comentar minha experiência ao utilizar o SASS como pre processador de CSS.É válido deixar claro que o que vou relatar são apenas minhas experiências com iniciação na plataforma (utilizando meu Mac). Vou abordar algumas dificuldades que tive, soluções que encontrei e em alguns momentos citar sites e referências para usuários de outras plataformas. Mesmo assim, acho que vale a pena dar uma olhada no material!

Afinal, o que é o SASS?

Resumindo bem, o SaSS é um outro método de escrever CSS e, de acordo com o site oficial é o CSS com super poderes. Na sigla, em inglês, SaSS significa Syntactically Awesome Style Sheets, algo como Incríveis Folha de Estilos Sintáticas.

O conceito de SaSS é esse, mas utiliza-lo no dia a dia não é tão simples quanto instalar um programa no computador e sair usando (como fazemos com o Dreamweaver / FrontPage / Bloco de Notas ou qualquer programa que você use para codificar). Por isso é chamado de pré processador: você escreve o código nessa linguagem e os programas corretos transformam o que você escreveu em SaSS em CSS comum. Aí, basta subir o CSS comum para o servidor e tudo feito. SaSS não é uma linguagem tipo HTML5 que você escreve, sobe pro servidor e o navegador reconhece tudo.

O que é preciso saber e possuir para começar a escrever em SaSS?

Abaixo são os tópicos, uma visão geral do que é necessário. Em seguida explico cada um deles em detalhes.

  1. SaSS depende do Ruby. Usuários de Mac já tem o Ruby instalado na máquina.
    Já os de Windows e Linux precisam primeiro instalar o Ruby para começar a brincadeira.
  2. Precisamos da GEM do Ruby responsável pelo SaSS (é fácil instalar depois que o Ruby já está na máquina)
  3. Será interessante possuir algum editor de texto compativel com o SaSS. Assim você pode escrever os códigos e eles vão ficando coloridos, ajudando na sintaxe. Escrever e tudo ficar preto e branco é bem chato.
  4. Framework para auxiliar com o SaSS. É possível escrever SaSS apenas usando o Terminal do Mac, mas um framework vai ajudar bastante, uma vez que é mais "visual" do que trabalhar com o Terminal.

Instalando o Ruby

Não confunda Ruby com Ruby On Rails. O segundo é o framework para se trabalhar com o Ruby.

Como informado anteriormente, usuários de Mac já possuem uma versão "standard" do Ruby instalada no sistema operacional.
Os usuários de Linux e Windows podem conferir alguns detalhes nos sites abaixo:

Linux: http://valbertovc.wordpress.com/2011/07/12/instalacao-do-ruby-no-linux-ubuntu/
Windows: http://simplesideias.com.br/configurando-ruby-rails-mysql-e-git-no-windows/

Instalando a GEM do SaSS

GEM são os pacotes de instalação fornecidos pelo Ruby. Tudo o que for instalado no Ruby ou pelo Ruby é uma "gem"

  1. No Mac, pressionando cmd espaço vai abrir a caixa de pesquisa de documentos e aplicativos.
  2. Digite "terminal" e clique no aplicativo que vai aparecer na busca.
  3. Na janela do terminal digite gem install sass espere alguns segundos até que você veja uma espécie de loading aparecer. O terminal vai pedir sua senha de acesso (aquela senha usada ao iniciar o Mac) e pronto.
  4. Se não funcionar (ou você não tiver permissão para instalar aplicativos tente o comando
    sudo gem install sass

Após concluir o processo, para ter certeza que tudo ocorreu bem, digite sass -v. Deve aparecer uma linha escrito assim: Sass 3.3.4 (Maptastic Maple). Pronto, está instalado e confirmado!

Para Linux e Windows os comandos são os mesmos porém no Windows você executa no Prompt de Comando e no Linux é só escrever direto.

Editor de SaSS

Versões mais antigas do Dreamweaver não possuem suporte nem ao SaSS e nem às mais modernas linguagens como o CSS3 e HTML5, portanto, é importante atualiza-las. Se você não dispor do investimento necessário para comprar um Dreamweaver original, indicamos o Sublime Text 2.

É uma espécie de bloco de notas gratuito, porém cheio de recursos e está atualizado com as versões mais modernas de diversas linguagens. Não é tão completo como um software da Adobe, mas vai ajudar muito.

Ao instalar o Sublime Text 2 você vai perceber que o programa não vem com suporte nativo ao SaSS, portanto, é preciso fazer um pequeno upgrade na ferramenta. Um dos sites que utilizei como referencia para escrever esse artigo é o blog da Loiane http://www.loiane.com e lá você encontra um tutorial bacana de como fazer isso: http://www.loiane.com/2014/01/suporte-sass-sublime-text/

Compass: Framework para utilizar com SaSS

É possível configurar algumas situações via Terminal no Mac para que os arquivos SaSS sejam atualizados em tempo real e convertidos em CSS sem problemas. Caso contrário você precisa ficar fazendo isso toda vez que salvar um arquivo SaSS. Eu tentei fazer isso por aqui e encontrei algumas dificuldades (seja porque as pastas estavam sem permissão ou porque o comando simplesmente não funcionou) e aí optei por comprar um framework para me auxiliar nesse processo, o Compass.

Custa uns R$ 20,00 e eu comprei via AppStore. Acho que foi um bom investimento porque o programa, quando aberto, fica vigiando as pastas SaSS que eu determinar e vai gerando os CSS para mim à medida que eu salvo o SaSS no Sublime Text.

Existe uma versão gratuita, porém sem interface visual, que pode ser instalada via terminal seguindo os mesmos padrões do SaSS, conforme abaixo:

gem install compass

Tanto no programa "comprado" quanto na versão gratuita via terminal é necessário iniciar um projeto compass antes de começar a vigiar uma pasta. Para a versão gratuita, vá até o terminal e digite:

compass create < nomedoseuprojeto > --syntax sass

Minhas primeiras impressões

No começo tive certa dificuldade de entender o processo e utilizar o SaSS, mas agora as coisas estão começando a ficar mais familiares para mim. A maior dificuldade é usar o SaSS pelo terminal. Apesar de eu ter conseguido executar as funções direitinho, acho que as ferramentas visuais são melhores para trabalhar (sublime text compass)

Vantagens de utilizar o SaSS

A linguagem permite que exploremos potenciais do CSS que a própria linguagem original não explora, como o uso de variaveis, cálculos com operadores, aninhamento de elementos, includes, herança e até mesmo funções.

Vou falar num próximo artigo sobre cada uma destas novas funcionalidades e citar alguns exemplos práticos. Por enquanto posso dizer que vale a pena o esforço.

Criando o primeiro projeto em SaSS só utilizando o Terminal / Prompt de Comando

A maneira mais simples e barata de se fazer seus primeiros projetos SaSS é utilizando um editor qualquer de texto e escrevendo seu “Hello World”. Digite algum código SaSS no editor, conforme o exemplo abaixo:

$cor-de-fundo: #000;
$cor-texto: #33cc33;
nav {
li { color: $cor-de-fundo; }
a { color: $cor-texto; }
}

E salve o arquivo como teste.scss em uma pasta de sua preferência.

Importante: a extensão .scss ou .sass vai depender da sintaxe utilizada. O .scss é o padrão adotado no CSS convencional (finalizando cada estilo com um ponto e vírgula) já o .sass não precisa disso, bastando apertar um enter no fim de cada linha sem colocar o ponto e vírgula.

Para que a mágica aconteça você precisa abrir agora o Terminal do mac, digitar o comando para abrir a pasta que contém o arquivo e escrever um outro comando que transforma seu arquivo ScSS / SaSS em CSS convencional.

Para abrir um diretório no Terminal basta digitar

cd caminhoDoDiretorio/

Dica: Arrastar o diretório para dentro do terminal vai fazer com que ele mostre o caminho do arquivo.

E depois, dentro do diretório, você digita:

sass teste.scss
(o nome do arquivo scss que você criou). Pronto, o terminal vai exibir todo o código CSS para você copiar e colar em seu website.

No caso do nosso exemplo, vai ficar assim:

nav li { color: black; }
nav a { color: #33cc33; }

Watches do SaSS para atualizar o arquivo em tempo real

É possível, ao invés de ficar aplicando o tempo todo o compando sass no arquivo.scss, deixar o terminal “vigiando” o arquivo. Assim, toda vez que você salva-lo, o terminal cria uma versão atualizada do arquivo CSS para você. Como mencionei acima, achei mais fácil instalar o Compass como framework para isso, mas de qualquer forma, vale a dica. Vá no terminal e digite (abaixo da pasta que está seu Sass)

sass —watch nomeDaPasta:nomeDaPasta

Pronto, ele vai acessar a pasta “nomeDaPasta” e procurar arquivos ScSS / SaSS e converte-los em CSS, moleza!

Dúvidas e confusões

O SaSS não é um framework e sim uma nova maneira de escrever CSS.
O navegador não reconhece páginas .sass ou .scss (Você processa antes de enviar para o site)

Referências

Minha experiência com SaSS

Agora que já aprendi um pouco sobre o SaSS, vou unir o útil ao agradável: Preciso desenvolver um novo website para a pizzaria do meu pai e vou aproveitar para aplicar estes novos conhecimentos na escrita do CSS da página. Isso vai render assunto para novos artigos de SaSS que vou postar aqui na MDM Studio.

A previsão é que falemos com mais detalhes sobre o uso de variáveis, cálculos com operadores, aninhamento de elementos, includes, herança, funções e outras novidades que o SaSS nos propicia.

08 de Abril de 2014 [14:50:38]

CEO da MDM Studio, Marcelo Motta participa ativamente do processo de produção de websites, tendo em seu portfólio mais de 130 trabalhos finalizados, entre marcas, websites e sistemas web. Os projetos mais recentes contam com a estrutura do HTML 5, combinados com CSS3 e versões mobile através de media queries.
 

TechNews

Informativos MDM Studio, Games e Tecnologia

Assine nosso Feed RSS