MaurĂcio Samy Silva
Novatec
Copyright © 2016 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Assistente editorial: Priscila Yoshimatsu Capa: Carolina Kuwabata Revisão gramatical: Andréa Sales Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-487-8 Histórico de impressões: Março/2016
Primeira edição
Novatec Editora Ltda. Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 E-mail: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec
capítulo 1
Introdução a Sass
Neste capítulo faremos a apresentação de Sass e Compass, mostrando suas finalidades, descrevendo sumariamente suas funcionalidades básicas e ensinando a configurar o workflow ou ambiente de trabalho para desenvolvê-lo com o uso de Sass.
1.1 Visão geral 1.1.1 O que é Sass Sass é uma extensão das CSS que adiciona poder e elegância à linguagem das folhas de estilo. O Sass oferece funcionalidades que permitem a definição de variáveis, a criação de regras aninhadas, o uso de mixins, as diretivas de importação e muito mais na escrita de CSS, e tudo isso com uma sintaxe compatível e semelhante à da CSS tradicional. Sass e Compass em conjunto permitem a criação de folhas de estilo reduzidas, de carregamento rápido e bem organizadas. Mixin é um termo usado em programação que, de maneira bem simples, pode ser definido como uma porção de código criada com a finalidade de adicionar capacidade comum a uma ou mais classes. Sob o ponto de vista de Sass, podemos pensar em mixins como um conjunto de declarações de estilo a serem utilizadas em diferentes regras de estilização dentro de uma folha de estilo, ou seja, os mixins fornecem uma maneira simplificada de se repetir declarações, ou mesmo regras de estilos, comuns, em diferentes locais de uma CSS.
20
Capítulo 1 ■ Introdução a Sass
21
1.1.2 O que é Compass Compass é um framework de código aberto que usa a linguagem Sass e destina-se a adicionar poder e simplicidade na escrita de CSS. O Compass adiciona funcionalidades extras ao Sass. Tais funcionalidades poderiam ser desenvolvidas nativamente com Sass, mas o Compass já as fornece prontas para uso. Neste livro estudaremos Sass com Compass, mas não mostraremos com detalhes todas as funcionalidades do Compass. Depois que você se tornar um expert no uso de Sass, estará em condições de entender, explorar e decidir se utilizará ou não estas funcionalidades de Compass. Resumindo: o Sass é autossuficiente e pode ser usado sem o Compass. Deixando de lado o jargão técnico, podemos dizer que Sass é uma maneira de escrever CSS usando a sintaxe tradicional das folhas de estilo acrescida de uma sintaxe típica de programação. Assim, podemos escrever CSS por meio de condicionais, loops, variáveis, includes e outras funcionalidades próprias de linguagens de programação. Diz-se que Sass é uma extensão das CSS exatamente pelo fato de que ele acrescenta sintaxe de programação à sintaxe tradicional das folhas de estilo.
1.1.3 O que é pré-processador Em ciência da computação, entende-se pré-processador como sendo um programa destinado a processar dados de entrada e a produzir dados de saída capazes de serem executados ou mesmo compilados por outras tecnologias ou programas. A forma mais simples de pré-processamento é a léxica, na qual os textos de entrada (dados de entrada) são analisados lexicamente pelo programa e substituições de caracteres ou sequência de caracteres são realizadas de acordo com as regras predefinidas a serem seguidas pelo programa pré-processador, produzindo textos de saída (dados de saída) capazes de serem interpretados por determinada tecnologia ou programa. Em geral, tais substituições compreendem a execução e a substituição de macros, condicionais, loops, variáveis etc.
22
Fundamentos de Sass e Compass
Sass é um pré-processador CSS. Os dados de entrada têm o formato de texto e seguem a sintaxe das folhas de estilo estendida pela sintaxe de programação prevista em Sass. A linguagem de programação para processamento dos dados de entrada é a linguagem Ruby que, seguindo regras predefinidas, processa a sintaxe estendida e produz como dado de saída um arquivo em formato texto estritamente de acordo com a sintaxe CSS tradicional, ou seja, capaz de ser lido e executado pelo navegador. O exemplo mostrado na figura 1.1 esclarece o que foi dito.
Figura 1.1 – De Sass para CSS.
Segundo a sintaxe Sass, $margem, $fontsize e $cor são variáveis às quais foi atribuído um valor CSS, cabecalhos (argumentos) é um mixin e @include é uma diretiva para incluir mixins. A simples observação da figura 1.1 é suficiente para se entender a obtenção do resultado (CSS) a partir da entrada (Sass), contudo se ainda assim está confuso, não se preocupe, pois tudo será explicado adiante.
1.1.4 SCSS e SASS O Sass admite duas sintaxes. A primeira, conhecida como SCSS, é uma extensão da sintaxe CSS, tal como já dissemos, e é a que adotaremos neste livro. Arquivos escritos com o uso desta sintaxe devem ser gravados com a extensão .scss, por exemplo: estilos.scss.
Capítulo 1 ■ Introdução a Sass
23
A segunda é uma sintaxe antiga, mas ainda válida, que surgiu quando do lançamento de Sass, e é conhecida como sintaxe indentada, pois usa a indentação no lugar das chaves { } e uma nova linha no lugar de ponto e vírgula, típicas da sintaxe CSS. Arquivos escritos por meio desta sintaxe devem ser gravados com a extensão .sass, por exemplo: estilos.sass. Observe a seguir as duas sintaxes em arquivos processados de forma idêntica: u
SCSS (Sintaxe adotada neste livro) $font-size: 16px; $border: 1px solid #ccc; h1 { font-size: $font-size; border: $border; }
u
SASS (Sintaxe antiga, mas ainda válida) $font-size: 16px $border: 1px solid #ccc h1 font-size: $font-size border: $border
O resultado do processamento das duas sintaxes é o mesmo mostrado a seguir: u
CSS h1 { font-size: 16px; border: 1px solid #ccc; }
24
Fundamentos de Sass e Compass
1.2 CLI – Interface da Linha de Comando O Sass usa a linguagem de programação Ruby para processar arquivos SCSS e transformá-los em arquivos CSS. Opa! Então eu tenho de saber programar em Ruby para usar o Sass? A resposta é um sonoro não; mas você precisa ter o Ruby instalado na sua máquina além de Sass e Compass. Se você usa Mac, o Ruby já vem instalado nativamente; se você utiliza Windows ou Linux, precisará instalá-lo. Este processo é feito por meio de uma interface textual conhecida pela sigla CLI – Command Line Interface –, que em tradução livre significa Interface da Linha de Comando, e em linguagem técnica corrente foi abreviada para Linha de Comando.
1.2.1 Linha de Comando Se você já conhece e sabe usar a Linha de Comando, sinta-se à vontade para passar à seção 1.3; contudo, mesmo sendo esse o caso, convido-o a continuar a leitura corrente, onde ensinamos os primeiros passos para a utilização da CLI. Na década de 1960, os usuários de computadores interagiam com a máquina por meio da Linha de Comando, que nada mais é do que uma interface para entrada de comandos destinados a estabelecer comunicação (interação) do usuário com a máquina e “dizer” ao computador o que fazer. Naquela época não existiam nem mouse nem as interfaces gráficas, tais como as conhecemos atualmente. Graças às interfaces gráficas somos capazes de criar, nomear e renomear pastas, gravar, abrir e fechar arquivos e executar uma infinidade de tarefas de interação do usuário com a máquina com um simples clique do mouse em ícones ou menus. As interfaces gráficas surgiram na década de 1970. Hoje, criar, nomear e renomear pastas e gravar e executar arquivos são tarefas que estamos acostumados a executar usando interfaces gráficas. Antigamente, essas tarefas eram executadas com comandos textuais digitados na Linha de Comando.
Capítulo 1 ■ Introdução a Sass
25
Ao contrário do que você possa imaginar, os computadores atuais e todos os sistemas operacionais em suas versões mais modernas possuem nativamente sua CLI que cumpre as mesmas funções da década de 1960. Antes de prosseguir, veja as Linhas de Comando no Windows e no Mac na figura 1.2.
Figura 1.2 – Linha de Comando.
1.2.1.1 Windows Para abrir o Prompt de Comando (o nome da Linha de Comando no Windows) no Windows 10, clique na lupa de pesquisa e digite a palavra “cmd” (sem aspas) na caixa de busca. No topo dos resultados da pesquisa você verá o ícone do Prompt de Comando. Clique duas vezes e a Linha de Comando será aberta, conforme mostrado na figura 1.2. Observe a figura 1.3. Em versões Windows anteriores siga o seguinte caminho: Start > All Programs > Accessories > Command Prompt Se, ainda assim, você tiver dificuldades para abrir a Linha de Comando, consulte a página de Ajuda no site da Microsoft.
26
Fundamentos de Sass e Compass
Figura 1.3 – Abrindo o Prompt de Comando no Windows 10.
1.2.1.2 Mac Para abrir o Terminal (o nome da Linha de Comando no Mac) clique no ícone do Finder no Dock. Na caixa que se abre, clique em Aplicativos e depois em Utilitários. Essas ações revelam o ícone do Terminal, conforme mostrado na figura 1.4. Clique no ícone para abrir o Terminal.
Figura 1.4 – Abrindo o Terminal no Mac.
Capítulo 1 ■ Introdução a Sass
27
1.2.1.3 Linux Para abrir o Terminal (o nome da Linha de Comando no Linux) pressione as teclas Ctrl+Alt+T. Se não funcionar, siga o caminho no menu Aplicações > Acessórios > Terminal ou, ainda, clique em Dash na barra lateral esquerda e digite Terminal na caixa de pesquisa.
1.2.2 Primeiros passos com a Linha de Comando Não é do escopo deste livro ensinar o uso exaustivo e as funcionalidades da Linha de Comando, pois elas são tantas e tão poderosas que existem obras inteiras dedicadas exclusivamente ao assunto. Publicações que tratam do Prompt de Comando do Windows, outras do Terminal do Mac e outras ainda do Terminal do Linux. Contudo, como a instalação de Ruby, Sass e Compass será feita com o uso da Linha de Comando, consideramos que mostrar alguns comandos básicos será uma ótima introdução a estas instalações e quem sabe sirva de motivação para que você, leitor, se interesse pelo assunto, aprofunde seus conhecimentos e passe a utilizar a Linha de Comando em suas tarefas de desenvolvimento e programação. Ao abrir a CLI aparece um cabeçalho e logo a seguir uma linha para entrada de um comando. Essa linha começa apontando para o diretório do usuário atual. Em Windows, normalmente, o cabeçalho informa a versão e o copyright, e o diretório é algo parecido com C:/Users/xxxx_000/. No Mac, o cabeçalho informa a data-hora do último login, e o diretório é algo como Nome da máquina ~Nome_usuário$. Ver figura 1.2. Vamos executar alguns comandos na CLI e observar o seu efeito. Nem todos os comandos seguem a mesma grafia nos ambientes Windows, Mac e Linux. Se você usa Mac ou Linux, consulte um dos inúmeros guias de comandos existentes online ou mesmo o comando help, como mostraremos adiante. Agora veja alguns comandos para Windows e Mac.
28
Fundamentos de Sass e Compass
Windows Abra a CLI, digite o seguinte comando e depois tecle Enter. $ cd c:/ O sinal cifrão $, que sempre aparece antes de um comando, é uma consagrada convenção tipográfica para indicar que se trata de um comando da CLI. Este cifrão inicial não deve ser digitado, pois não faz parte do comando.
Ao digitar o comando mostrado, a linha de entrada do comando que apontava para o diretório do usuário ao se abrir a CLI passa a apontar para o diretório-raiz C:/. Os comandos chdir e sua forma abreviada cd se destinam a alterar o diretório mostrado na linha do comando. CHDIR ou CD são abreviaturas em inglês para “change directory”, que em tradução livre significa “muda diretório”. Em Windows, ambas as formas (chdir e cd) são reconhecidas. Na nova linha, digite o comando help (Ajuda) e depois tecle Enter. Este comando faz com que seja apresentada na tela uma lista dos comandos e uma breve descrição das suas funções. Percorra a lista, leia cada item sem se preocupar em decorar e tenha seu primeiro contato com os comandos da interface CLI. É importante ressaltar que a grafia para digitar os comandos é insensível ao tamanho de caixa, isto é, você pode usar letras maiúsculas ou minúsculas quando digitar um comando na CLI.
Observe na figura 1.5 o resultado da inserção dos dois comandos, conforme descritos. Para limpar a tela digite o comando cls e depois tecle Enter. CLS é a abreviatura em inglês para “clear screen”, que em tradução livre significa “limpa a tela”. Na Linha de Comando é sempre mostrado o caminho para o diretório atual.
Capítulo 1 ■ Introdução a Sass
29
Figura 1.5 – Comandos na CLI do Windows.
Mac Abra a CLI, digite o seguinte comando e depois tecle Enter. $ cd O sinal cifrão $, que sempre aparece antes de um comando, é uma consagrada convenção tipográfica para indicar que se trata de um comando a ser digitado na CLI. Este cifrão inicial não deve ser digitado, pois não faz parte do comando.
Ao digitar o comando mostrado, a linha de entrada do comando que apontava para o diretório do usuário ao se abrir a CLI passa a apontar para o diretório-raiz /. No Mac, o sinal ~ é um alias para o diretório-raiz.
O comando cd se destina a alterar o diretório mostrado na linha do comando. CD é abreviatura em inglês para “change directory”, que em tradução livre significa “muda diretório”. Na nova linha, digite o comando help (Ajuda) e depois tecle Enter. Este comando faz com que seja apresentada na tela uma lista dos comandos e uma breve descrição de suas funções. Percorra a lista, leia cada item sem se preocupar em decorar e tenha seu primeiro contato com os comandos da interface CLI.
30
Fundamentos de Sass e Compass É importante ressaltar que a grafia para digitar os comandos é insensível ao tamanho de caixa, isto é, você pode usar letras maiúsculas ou minúsculas quando digitar um comando na CLI.
Observe na figura 1.6 o resultado da inserção dos dois comandos, conforme descritos:
Figura 1.6 – Comandos na CLI do Mac.
Para limpar a tela digite o comando clear e depois tecle Enter. Para inspecionar o caminho para o diretório atual na Linha de Comando digite pwd.
1.2.2.1 Exercício Vamos fazer um exercício prático para demonstrar algumas funcionalidades básicas da CLI. 1. Use a CLI para criar os diretórios (ou pastas) denominados Pasta1 e Pasta2 no Desktop do seu computador. 2. Abra o seu editor de texto, crie um arquivo contendo o texto “Este é o arquivo um” e salve na Pasta1 com o nome arquivo1.txt. 3. Abra o seu editor de texto, crie um arquivo contendo o texto “Este é o arquivo dois” e salve na Pasta2 com o nome arquivo2.txt.
31
Capítulo 1 ■ Introdução a Sass
4. Faça uma cópia do arquivo1.txt e renomeie para copia_arquivo1.txt. Pasta e diretório têm o mesmo significado. O primeiro é o termo usado em ambiente Windows, o segundo, em ambiente Mac. Os termos se destinam a designar um local onde estão contidos arquivos e/ou outras pastas (diretórios).
Solução A sintaxe do comando destinado a criar pastas é mostrada a seguir: $ mkdir <nome da pasta ou diretório> // Funciona no Windows e Mac
ou sua forma abreviada: $ md <nome da pasta>
// Funciona só no Windows
Não existe sintaxe para inserir comentários depois de um comando na CLI. Neste livro, para fins didáticos, quando for o caso, comentaremos a linha de comando usando o sinal // (duas barras) seguido do texto do comentário logo após o comando, tal como fizemos nas duas linhas de comando mostradas anteriormente.
O argumento <nome da pasta> define o nome da pasta, que pode ser um ou mais nomes separados por espaço, se pretendermos criar várias pastas. A pasta será criada dentro da pasta mostrada na Linha de Comando. No nosso exemplo foi pedido para criá-las na pasta Desktop. A sintaxe do comando destinado a criar cópias de um arquivo é a seguinte: $ copy <nome do arquivo> <nome da cópia> // Funciona no Windows $ cp <nome do arquivo> <nome da cópia> // Funciona no Mac u
Windows
Normalmente, em Windows, o caminho para a pasta Desktop é: C:/Users/<nome do usuário>/Desktop. ■
Abra a CLI. Por padrão você estará em C:/Users/<nome do usuário>/.
■
Após digitar cada um dos seguintes comandos, tecle Enter.
$ cd Desktop
$ md Pasta1 Pasta2
32
Fundamentos de Sass e Compass
u
■
Digite o comando dir (Windows) ou ls (Mac) e depois tecle Enter. Este comando exibe o diretório ou o conteúdo da pasta mostrada na Linha de Comando, que neste exemplo é o Desktop. Você verá na CLI os conteúdos do Desktop, e, se tudo deu certo, lá estarão as pastas Pasta1 e Pasta2. Confira examinando o Desktop do seu computador com a interface gráfica que você normalmente usa. Você acaba de realizar sua primeira tarefa com uso da CLI, seja bem-vindo à Linha de Comando.
■
Abra o seu editor de texto Notepad. Digite a frase “Este é o arquivo um” (sem aspas) e salve com o nome arquivo1.txt na Pasta1 recém-criada.
■
Repita o procedimento anterior. Digite a frase “Este é o arquivo dois” (sem aspas) e salve com o nome arquivo2.txt na Pasta2 recém-criada.
■
Volte para a CLI, digite o comando cd Pasta1 e depois tecle Enter. Este comando leva para C:/Users/<nome do usuário>/Desktop/Pasta1.
■
Digite o comando dir (Windows) ou ls (Mac) e depois tecle Enter. Este comando exibe o DIRetório ou o conteúdo da pasta mostrada na Linha de Comando, que neste exemplo é a Pasta1. Você verá na CLI os conteúdos da Pasta1, e, se tudo deu certo, lá estará o arquivo arquivo1.txt. Confira examinando a Pasta1 no Desktop do seu computador com a interface gráfica que você normalmente usa.
■
Digite o comando copy arquivo1.txt copia_arquivo1.txt e depois tecle Enter. Este comando cria uma cópia do arquivo1.txt e a nomeia como copia_arquivo1.txt. Confira a criação da cópia examinando a Pasta1 no Desktop.
Mac
Normalmente, no Mac, o caminho para o diretório Desktop é: ~Users/<nome do usuário>/Desktop. ■
Abra a CLI. Por padrão, você estará em ~Users/<nome do usuário>.
Capítulo 1 ■ Introdução a Sass
33
■
Após digitar cada um dos seguintes comandos, tecle Enter.
$ cd desktop
$ mkdir Pasta1 Pasta2
■
Digite o comando ls e depois tecle Enter. Este comando lista o diretório ou o conteúdo da pasta na Linha de Comando, que neste exemplo é o Desktop. Você verá na CLI os conteúdos do Desktop, e, se tudo deu certo, lá estarão as pastas Pasta1 e Pasta2. Confira examinando o Desktop do seu computador com a interface gráfica que você normalmente usa. Você acaba de realizar sua primeira tarefa com uso da CLI, seja bem-vindo à Linha de Comando.
■
Abra o seu editor de texto. Digite a frase “Este é o arquivo um” (sem aspas) e salve com o nome arquivo1.rtf na Pasta1 recém-criada.
■
Repita o procedimento anterior. Digite a frase “Este é o arquivo dois” (sem aspas) e salve com o nome arquivo2.rtf na Pasta2 recém-criada.
■
Volte para a CLI, digite o comando cd Pasta1 e depois tecle Enter. Este comando leva para ~Users/<nome do usuário>/Desktop/Pasta1.
■
Digite o comando ls e depois tecle Enter. Este comando lista o diretório ou o conteúdo da pasta mostrada na Linha de Comando, que neste exemplo é a Pasta1. Você verá na CLI os conteúdos da Pasta1, e, se tudo deu certo, lá estará o arquivo arquivo1.rtf. Confira examinando a Pasta1 no Desktop do seu computador com a interface gráfica que você normalmente usa.
■
Digite o comando cp arquivo1.rtf copia_arquivo1.rtf e depois tecle Enter. Este comando cria uma cópia do arquivo1.rtf e a nomeia como copia_arquivo1.rtf. Confira a criação da cópia examinando a Pasta1 no Desktop.
Este simples exemplo mostrou, na prática, que as tarefas que você executa no seu computador usando cliques de mouse em ícones da interface gráfica podem ser executadas com digitação na CLI, como se não existisse mouse.
34
Fundamentos de Sass e Compass
Se você é usuário Mac e pretende saber mais sobre a interação com o uso da CLI, recomendo o livro Aprendendo Unix no OS X Montain Lion, de Dave Taylor (Novatec, 2013). Consulte: http://www.novatec.com.br/livros/unixosx/. Uma busca no Google por “linha de comando” retorna várias consultas sobre o assunto nas diferentes plataformas.
1.3 Instalação de Sass e Compass Já dissemos que em Sass usa-se a linguagem de programação Ruby. Assim faz-se necessário que você instale Ruby no seu computador. Vamos começar sabendo se o Ruby já está ou não instalado. Abra a CLI e digite o seguinte comando: $ ruby -v
Este comando inspeciona se o Ruby está instalado e qual a versão (argumento -v). Na figura 1.7 mostramos o resultado da inspeção da existência de uma instalação Ruby no Windows e no Mac.
Figura 1.7 – Verificando se o Ruby está instalado.
Capítulo 1 ■ Introdução a Sass
35
Como era esperado, no Windows o Ruby não está instalado, e no Mac, como dissemos anteriormente, a instalação é nativa, e no caso da figura trata-se da versão 2.0.0p481, revista em 08/05/2014. É muito provável que já exista uma versão mais atual do Ruby, contudo é certo que ela funcione perfeitamente para processar o Sass. Assim, neste caso, deixamos fora do escopo deste livro a atualização tanto no Mac quanto no Windows, se você já tem uma versão pré-instalada. Para instalar o Ruby no Windows abra a página http://rubyinstaller.org/ downloads/ e baixe a versão mais recente do programa. Escolha o primeiro link de download, como destacado na figura 1.8, no caso Ruby 2.2.3.
Figura 1.8 – Download do Ruby para Windows.
Conforme explicado na coluna direita da página de download, a versão para (x64), à época que este item foi escrito, ainda era muito recente e nem todos os pacotes da linguagem tinham sido atualizados para 64bits. Por essa razão, optamos pelo Ruby 2.2.3 e não pelo Ruby 2.2.3(x64), embora a máquina da instalação fosse de 64bits (x64). Clique no link e será baixado um arquivo executável, no nosso caso foi o arquivo de nome rubyinstaller-2.2.3.exe. Execute o arquivo e siga as instruções na tela.
36
Fundamentos de Sass e Compass
A primeira tela oferece as opções de escolha do idioma de instalação (inglês e japonês). Instalamos com a opção default English. Na segunda tela, marque a opção I accept the License e clique o botão Next. A terceira informa o local-padrão da instalação do Ruby e dá a opção de escolher outro local. A não ser que você tenha uma razão para mudar, concorde com o local-padrão. Nessa tela, conforme mostrado na figura 1.9, há três caixas do tipo botão checkboxes para escolha de opções, marque a opção Add Ruby executables to your PATH e clique no botão Install. Aguarde a instalação e a última tela informará que o Ruby foi instalado. Clique no botão Finish e o Ruby estará instalado na sua máquina.
Figura 1.9 – Tela de instalação do Ruby para Windows.
Abra a CLI e digite o seguinte comando, tal como fizemos anteriormente (ver figura 1.7): $ ruby -v
Este comando inspeciona se o Ruby está instalado e qual a versão (argumento -v), e o retorno na CLI deve ser algo parecido com o seguinte: C:\Users\maujo_000>ruby -v ruby 2.2.3p173 (2005-08-18 revision 51636) [i386-mingw32] C:\Users\maujo_000>
Capítulo 1 ■ Introdução a Sass
37
Informando, assim, que no Windows está instalada a versão 2.2.3p173, revista em 18/08/2015. Agora que temos o Ruby instalado na máquina, estamos em condições de instalar o Sass e o Compass, mas antes fique atento a algumas considerações que julgamos pertinentes. O termo gem é bastante conhecido e usado em desenvolvimento Ruby. “Gem” é um termo em inglês, que no contexto do Ruby pode ser traduzido como pedra preciosa, assim como a tradução de “ruby” é rubi, uma espécie específica de pedra preciosa de cor vermelha (a figura 1.8 mostra o logotipo de Ruby que é exatamente um rubi). Em Ruby, gem é uma biblioteca criada em linguagem Ruby que tem um nome e uma versão e destina-se a cumprir tarefas específicas que não são nativas da linguagem. Gems são programas de código aberto, desenvolvidos e disponibilizados por qualquer um que resolva criar uma biblioteca para cumprir determinada funcionalidade não nativa de Ruby e que ficam hospedadas em um repositório no site https://rubygems.org. Algumas gems são instaladas automaticamente com o Ruby. Para saber quais são estas gems, abra a CLI e digite o seguinte comando: $ gem list
// Windows
$ gem ls
// Mac
Já dissemos que os criadores de Sass e de Compass usaram a linguagem Ruby como base para o processamento de arquivos de folhas de estilo. Paralelemente desenvolveram e disponibilizaram as gems denominadas sass e compass para cumprir as tarefas específicas do processamento. Para instalar uma gem não é necessário fazer o download e executar um arquivo, tal como estamos acostumados a instalar programas em nossas máquinas. Em ambiente Ruby basta digitar um comando na CLI com a sintaxe geral, como mostraremos a seguir, e o Ruby procura no site Rubygems e instala a gem. $ gem install <nome da gem> // Windows $ sudo gem install <nome da gem> // Mac
38
Fundamentos de Sass e Compass
No Mac, você precisa acrescentar o comando sudo no início, pois a instalação de gems é feita em pastas compartilhadas por vários usuários e só pode ser feita pelo administrador. Se você omitir o comando sudo retornará uma mensagem informando que é necessária uma credencial de administrador para que o comando seja executado. Com o uso de sudo será solicitada a senha de acesso do usuário. Instale Sass e Compass digitando o seguinte comando na CLI e depois tecle Enter: $ gem install compass // Windows – Por padrão, ao instalar compass, será // também instalado sass $ gem sudo install compass // Mac – Por padrão, ao instalar compass, será // também instalado sass
Se por um motivo qualquer você pretende instalar somente Sass (e não Compass), digite o seguinte comando na CLI e depois tecle Enter: $ gem install sass
// Windows
$ sudo gem install sass // Mac Para acompanhar os exemplos deste livro é mandatório que você instale Compass e Sass.
Uma vez feita a instalação, digite novamente o comando gem list (Windows) ou gem ls (Mac). Agora você verá que aparecem as gems sass e compass listadas na CLI. Para saber a versão de Sass e Compass que acabam de ser instaladas, digite os seguintes comandos (tecle Enter após cada linha digitada): $ compass -v $ sass -v
Agora que você instalou o Ruby, o Sass e o Compass na sua máquina, podemos começar o estudo da criação de folhas de estilo com o uso de Sass.