Primeiros passos com a instalação do Sass e noções básicas

Neste post, vamos discutir um pré-processador CSS chamado Sass ou Estilos de folha incrivelmente sintéticos.

Se você tem acompanhado nossos posts anteriores sobre o LESS, temos certeza de que você está familiarizado com o Pré-processador CSS. Tanto o Sass quanto o LESS são pré-processadores de CSS que basicamente expandem a maneira como compomos o CSS estático simples de maneira mais dinâmica, usando linguagens de programação como Variáveis, Mixins e Funções..

Instalando o Sass

Antes de podermos compor o Sass precisamos instalá-lo. Sass é construído sobre Ruby. Se você está trabalhando em um Mac, provavelmente já tem o Ruby instalado. Se você puder instalar o Ruby no Windows, use este Instalador Ruby.

Após a conclusão da instalação, você pode ir para o Terminal (em um Mac) ou no Prompt de Comando (no Windows) e digite a seguinte linha de comando:

No Mac;

 sudo gem instalar sass

No Windows;

 gem instalar sass

Se a instalação for bem-sucedida, você terá a seguinte notificação no terminal / prompt de comando.

Em seguida, precisamos selecionar qual diretório para o Sass assistir usando o seguinte comando;

 sass - caminho de vigia / diretório sass

A linha de comando acima irá assistir a cada .scss/.sass arquivos em caminho / diretório e sempre que um dos arquivos desse diretório for alterado, o Sass atualizará os arquivos correspondentes ou criará um, se nenhum existir.

Se precisarmos do Sass para gerar os arquivos em um diretório específico, podemos fazê-lo dessa maneira;

 sass --watch path / sass-directory: diretório path / css

Também podemos assistir a um arquivo específico em vez do diretório, com esta linha de comando;

 sass --watch path / sass-directory / styles.css

Se o comando watch for bem-sucedido, algo como esta notificação abaixo aparecerá no seu terminal / prompt de comando.

Leitura Adicional: Auto-compilar arquivos Sass com Sass 3

Aplicações Sass

No entanto, se você odeia trabalhar no Terminal ou no Prompt de Comando, pode usar alguns aplicativos para o Sass. A opção gratuita é Scout; Ele é construído no Adobe Air para que possa ser executado em todos os sistemas operacionais (Windows, OSX e Linux).

No entanto, é muito lento, como alguns relataram anteriormente.

Então, se você não tiver paciência para isso, há também algumas opções pagas. O preço varia para cada aplicativo, Compass.app vale US $ 10, Fire.app, US $ 14 e Codekit por US $ 25.

Realce de código

Embora o Sass seja basicamente uma extensão CSS, seu editor atual pode não destacar a sintaxe corretamente. Felizmente, já existem alguns pacotes para quase qualquer editor de código para ativar .sass ou .scss destaque de código.

Se você está trabalhando com o Sublime Text 2 como eu, você pode usar esses pacotes; Texto Sublime HAML & Sass e Sublime Text 2 Sass Package, e para uma maneira mais fácil, você pode instalar um desses pacotes através do Package Control.

Para outros editores de código, veja abaixo ou tente pesquisar por ele.

Este é um ótimo tutorial de screencast sobre como trabalhar no Sass com o Dreamweaver
Modo Sass para Coda. Mas, parece que este modo foi integrado com o Coda a partir da versão 2
Pacote oficial do TextMate SCSS
Açúcar Espresso para Sass
Pacotes InType

Linguagem Sass

Sass e LESS na verdade compartilham algumas linguagens comuns, abaixo estão algumas delas.

Variáveis

 $ base da cor: # 000; $ width: 100px;

A única diferença das variáveis LESS é que a variável em Sass é definida com um $ placa.

Regras de aninhamento

 cabeçalho largura: 980px; altura: 80px; nav ul estilo de lista: nenhum; preenchimento: nenhum; margem: nenhuma;  li display: inline; um texto-decoração: nenhum;

Mixins e Funções

 @mixin border-radius ($ radius) -moz-fronteira-raio: $ raio; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; border-radius: $ raio;

Operações

 li largura: $ largura / 5 - 10px;

Afirmação condicional

 @ se leveza ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

Em menos você pode fazer uma coisa semelhante através da expressão Guard, que abordamos neste tutorial.

Pensamento final

E é isso. No próximo post, vamos começar a explorar as linguagens Sass e seu companheiro, Compass. Fique ligado.