Um guia simples e fácil de entender o Sass

Um tempo atrás, Thoriq Firdaus escreveu um ótimo artigo sobre como começar a usar o Sass, que mostrou como instalar e usar essa linguagem de pré-processamento CSS altamente útil (você pode querer dar uma olhada, você sabe, para começar).

Neste artigo, pensei em dar a você mais detalhes sobre o que você pode fazer com o Sass e como os desenvolvedores o usam todos os dias para criar um código CSS melhor e mais modular. Pule para a seção que você deseja:

• Ferramentas do Comércio
• Variáveis
• Aninhamento
• Estendendo conjuntos de regras
• Mixins
• Seletores de espaço reservado
• Operações
• Funções

Ferramentas do Comércio

Thoriq mostrou como você pode usar o Sass na linha de comando usando o sass --watch comando.

Se você preferir ferramentas GUI, você pode usar meu aplicativo favorito, o Codekit, uma ferramenta de desenvolvimento web para compilar o Sass, concatenar, autoprefixing e muito mais. Prepros é outra aplicação muito capaz que pode ser usada em todos os sistemas. Ambos são aplicações pagas mas valem a pena se você for usá-los a longo prazo.

Se você quer apenas experimentar o Sass sem pagar por nada você pode usar o terminal, ou Koala (aqui está a nossa análise), um aplicativo gratuito rico em recursos de plataforma cruzada, que pode manter o seu terreno contra as contrapartes premium.

Variáveis

Uma das primeiras coisas que você precisa para envolver sua cabeça é variáveis. Se você vem de um PHP ou outro fundo de linguagem de programação semelhante, isso será uma segunda natureza para você. Variáveis ​​são para armazenar pedaços de informação reutilizáveis, como um valor de cor por exemplo:

 $ primary_color: # 666666; .button color: $ primary_color;  .important color: $ primary_color;  

Isso pode não parecer tão útil aqui, mas imagine ter 3.000 linhas de código. Se o esquema de cores mudar, você precisará substituir cada valor de cor no CSS. Com Sass você pode apenas modificar o valor do $ primary_color variável e ser feito com isso.

Variáveis ​​são usadas para armazenar nomes de fontes, tamanhos, cores e uma série de outras informações. Para projetos maiores, talvez valha a pena extrair todas as suas variáveis ​​em um arquivo separado (vamos ver como isso é feito em breve). O que isso permite que você faça é recolorir todo o seu projeto e alterar as fontes e outros aspectos-chave sem nunca tocar em regras reais de CSS. Tudo que você precisa fazer é modificar algumas variáveis.

Aninhamento

Outra característica básica que o Sass lhe dá é a capacidade de aninhar regras. Vamos supor que você esteja construindo um menu de navegação. Você tem um nav elemento que contém uma lista não ordenada, itens de lista e links. Em CSS você pode fazer algo assim:

 #header nav / * Regras para a área de navegação * / #header nav ul / * Regras para o menu * / #header nav li / * Regras para itens de lista * / #header nav a / * Rules para links * / 

Nos seletores, estamos nos repetindo muito. Se os elementos têm raízes comuns, podemos usar o aninhamento para escreva nossas regras de uma maneira muito mais limpa.

Veja como o código acima pode aparecer no Sass:

 #header nav / * Regras para a área de navegação * / ul / * Regras para o menu * / li / * Regras para itens de lista * / a / * Regras para links * / 

O aninhamento é extremamente útil porque torna stylesheets (muito) mais legível. Ao usar o aninhamento junto com o recuo adequado, você pode obter estruturas de código altamente legíveis, mesmo se você tiver uma boa quantidade de código.

Uma desvantagem do aninhamento é que ele pode levar a uma especificidade desnecessária. No exemplo acima, referi-me a links com #header nav a. Você também pode usar #header nav ul li a o que provavelmente seria demais.

No Sass, é muito mais fácil ser muito específico, pois tudo que você precisa fazer é aninhar suas regras. O que se segue é muito menos legível e bastante específico.

 #header nav / * Regras para a área de navegação * / ul / * Regras para o menu * / li / * Regras para itens de lista * / a / * Regras para links * / 

Estendendo conjuntos de regras

A extensão será familiar se você estiver trabalhando com linguagens orientadas a objetos. É melhor entendido através de um exemplo, vamos criar 3 botões que são pequenas variações uns dos outros.

 .botão display: inline-block; cor: # 000; fundo: # 333; raio de fronteira: 4 px; preenchimento: 8 px 11 px;  .button-primary @extend .button; background: # 0091C2 .button-small @extend .button; tamanho da fonte: 0.9em; preenchimento: 3px 8px;  

o .botão-primário e .botão pequeno classes todos estendem o .botão classe que significa que eles assumem todas as suas propriedades e, em seguida, definem seus próprios.

Isso é imensamente útil em muitas situações em que variações de um elemento podem ser usadas. Mensagens (alerta / sucesso / erro), botões (cores, tamanhos), tipos de menu e assim por diante podem usar a funcionalidade de extensão para uma grande eficiência CSS.

Uma ressalva de extensão é que eles não funcionam em consultas de mídia como você esperaria. Isso é um pouco mais avançado, mas você pode ler tudo sobre esse comportamento em Noções básicas sobre seletores de espaços reservados - seletores de espaço reservado são tipos especiais de extensão sobre os quais falaremos em breve.

Mixins

Mixins são outro recurso favorito de usuários pré-processadores. Mixins são conjuntos de regras reutilizáveis ​​- perfeitos para regras específicas de fornecedores ou para regras CSS longas.

Que tal criar uma regra de transição para elementos de foco:

 @mixing hover-effect -webkit-transition: cor de fundo 200ms; -moz-transition: cor de fundo 200ms; -o-transição: cor de fundo 200ms; transição: cor de fundo 200ms;  um @include hover-effect;  .button @include hover-effect;  

Mixins também permitem que você use variáveis ​​para definir os valores dentro do mixin. Poderíamos reescrever o exemplo acima para nos dá controle sobre o tempo exato da transição. Podemos querer que os botões façam a transição um pouco mais devagar, por exemplo.

 @mixin hover-effect ($ speed) -webkit-transition: cor de fundo $ speed; -moz-transition: cor de fundo $ speed; -o-transição: cor de fundo $ velocidade; transição: background-color $ speed;  um @include hover-effect (200ms);  .button @include hover-effect (300ms);  

Seletores de espaço reservado

Os seletores de espaço reservado foram introduzidos com o Sass 3.2 e solucionaram um problema que poderia causar um pouco de inchaço em seu código CSS gerado. Dê uma olhada neste código que cria mensagens de erro:

 .mensagem font-size: 1.1em; preenchimento: 11px; largura da borda: 1px; estilo de borda: sólido;  .message-danger @extend .message; fundo: # C20030; cor: #fff; cor da borda: # A8002A;  .message-success @extend .message; fundo: # 7EA800; cor: #fff; cor da borda: # 6B8F00;  

É mais provável que a classe da mensagem nunca seja usada em nosso HTML: ela foi criado para ser estendido, não usado como é. Isso causa um pouco de inchaço no seu CSS gerado. Para tornar seu código mais eficiente, você pode usar o seletor de espaço reservado, indicado por um sinal de porcentagem:

 % message font-size: 1.1em; preenchimento: 11px; largura da borda: 1px; estilo de borda: sólido;  .message-danger @extend% button; fundo: # C20030; cor: #fff; cor da borda: # A8002A;  .message-success @extend% button; fundo: # 7EA800; cor: #fff; border-color: # 6D9700;  

Nesta fase, você pode estar se perguntando qual é a diferença entre estender e mixins. Se você usa placeholders, eles se comportam como um mixin sem parâmetros. Isso é verdade, mas a saída no CSS é diferente. A diferença é que regras duplicadas de mixins enquanto os placeholders garantirão que as mesmas regras compartilhem seletores, resultando em menos CSS no final.

Operações

É difícil resistir ao trocadilho aqui, mas vou me abster de qualquer piada médica por enquanto. Os operadores permitem que você faça alguma matemática no seu código CSS e pode ser bastante útil. O exemplo no guia Sass é perfeito para mostrar isso:

 .container largura: 100%;  artigo float: left; largura: 600px / 960px * 100%;  aparte float: certo; largura: 300px / 960px * 100%;  

O exemplo acima cria um sistema de grade baseado em 960px com o mínimo de problemas. Ele irá compilar bem para o seguinte CSS:

 .container largura: 100%;  artigo float: left; largura: 62,5%;  aparte float: certo; largura: 31,25%;  

Um grande uso que encontro para as operações é realmente misturar cores. Se você der uma olhada na mensagem de sucesso Sass acima, não está claro se a cor do fundo e da borda tem algum tipo de relacionamento. Ao subtrair um tom de cinza, podemos escurecer a cor, tornando o relacionamento visível:

 $ primary: # 7EA800; .message-success @extend% button; plano de fundo: $ primary; cor: #fff; border-color: $ primary - # 111;  

Quanto mais clara for a cor subtraída, mais escura será a tonalidade resultante. Quanto mais clara a cor adicionada, mais claro é o tom resultante.

Funções

Há um grande número de funções a serem usadas: funções numéricas, funções de string, funções de lista, funções de cor e muito mais. Dê uma olhada na longa lista na documentação do desenvolvedor. Vou dar uma olhada em um casal aqui só para mostrar como eles funcionam.

o aliviar e escurecer função pode ser usada para alterar a luminosidade de uma cor. Isso é melhor do que subtrair sombras, torna tudo ainda mais modular e óbvio. Dê uma olhada no nosso exemplo anterior usando a função de escurecimento.

 $ primary: # 7EA800; .message-success @extend% button; plano de fundo: $ primary; cor: #fff; border-color: escurecer ($ primário, 5);  

O segundo argumento da função é a porcentagem de escurecimento necessária. Todas as funções possuem parâmetros; dê uma olhada na documentação para ver o que eles são! Aqui estão algumas outras funções de cores auto-explicativas: desaturar, saturar, invertido, grayscale.

o ceil função, assim como no PHP, retorna um número arredondado para o próximo número inteiro. Isso pode ser usado ao calcular larguras de coluna ou se você não quiser usar muitas casas decimais no CSS final.

 .title font-size: ceil ($ heading_size * 1,3314);  

visão global

Os recursos do Sass nos dão grande poder para escrever melhor CSS com menos esforço. O uso adequado de mixins, extensões, funções e variáveis ​​tornará nossas folhas de estilo mais sustentáveis, mais legíveis e mais fáceis de escrever.

Se você estiver interessado em outro pré-processador CSS similar, sugiro dar uma olhada no LESS (ou confira nosso guia para iniciantes) - o principal subjacente é praticamente o mesmo.!