Agora eu tenho certeza que você já ouviu falar do Sass e como "Você realmente precisa começar a usá-lo!"
Aprender uma nova ferramenta pode ser uma tarefa difícil e encontrar tempo para isso é quase impossível, mas às vezes surge uma ferramenta que muda nossa indústria e é boa demais para ser ignorada.
À medida que nossas páginas e aplicativos se tornam mais complexos, nossas folhas de estilo ficam maiores e mais difíceis de manter. Os pré-processadores de CSS, como o Sass, ajudam mantendo nossas folhas de estilo concisas e nos permitindo modularizar nosso código, oferecendo uma grande quantidade de recursos ainda não disponíveis no CSS normal.
Esses recursos extras também os tornam muito divertidos de usar! Agora você pode ter visto algo parecido com isto:
$i: 6;@while $i > 0 {.item-#{$i} {width: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
e pensei: “Whatttttttttttt? Obrigado, mas vou manter meu CSS regular.
Eu admito, parece assustador e algumas pessoas estão realmente loucas, coisas complexas com Sass, mas eu estou aqui para lhe dizer que qualquer um pode começar a usá-lo e os ganhos que você obter no primeiro dia fará de você um crente Sass.
Preparar o Sass para um projeto está um pouco além do escopo deste artigo, mas a instalação é relativamente fácil e o site do Sass tem instruções para Linux, Mac ou PC. O legal é que, uma vez instalado, você pode pegar qualquer arquivo CSS que você tiver e renomeá-lo .scss tornando-se um arquivo Sass.
Todo o CSS formatado corretamente é válido Sass!
Isso significa que você pode começar a usar o Sass enquanto continua a escrever seus estilos como sempre, incorporando lentamente mais recursos à medida que seu nível de conforto aumenta. É isso mesmo gente, apenas o mesmo ol '. mesmo ol ', mas aqui estão cinco ganhos impressionantes que você tem agora à sua disposição:
Qual é a cor do cabeçalho principal novamente? Como faço para escrever essa pilha de fontes? Quantas vezes você tem escrito CSS e teve que pesquisar por seus estilos anteriores por um valor ou teve que quebrar o conta-gotas de cor, mais uma vez, para descobrir essa cor hexadecimal?
O Sass fornece variáveis como uma maneira de armazenar informações que você deseja reutilizar em toda a sua folha de estilo. Agora você pode armazenar esse valor de cor ou uma pilha longa de fontes como algo fácil de lembrar. A maneira como você declara uma variável é com um cifrão $ seguido pelo nome. Este nome pode ser o que você quiser. Então você digita um cólon : seguido pelo valor e um ponto e vírgula ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Agora, se você quiser usar um desses valores, basta usar a variável.
.mySelector { font-family: $mainFont; color: $mainColor; }
Impressionante, certo? Esse único recurso faz com que valha a pena a instalação, pois economiza muito tempo ao criar CSS. É tão bom que provavelmente entrará no CSS especificação mas quem sabe quando poderemos usá-lo? Para nossa sorte, com Sass, não temos que esperar.
Agora você pode estar dizendo para si mesmo “CSS tem @import, não é legal” e você estaria certo, mas as versões CSS e Sass diferem de maneira significativa. Em CSS normal @import puxa em outras folhas de estilo, mas faz isso fazendo outra requisição HTTP, algo que geralmente queremos evitar. Por esse motivo, você pode nem ter usado o @import antes. Sass, por outro lado, é um pré-processador (ênfase no pré) que irá extrair esse arquivo antes de compilar o CSS.
O resultado é uma página CSS que é manipulada por uma solicitação HTTP. O que isto significa é que você pode dividir seu css em partes menores e mais fáceis de manter, enquanto ainda serve apenas uma página ao navegador. Precisa consertar o texto no botão? Não mais folhas de estilo de skimming procurando os estilos de botão pertinentes. Basta abrir o botão parcial e fazer as alterações.
O que é parcial? Apenas como soam. Eles são arquivos Sass parciais que contêm pequenos trechos de CSS que você pode incluir em outros arquivos Sass. Eles são nomeados usando um sublinhado inicial seguido por um nome. _myFile.scss . O sublinhado permite que o Sass saiba que o arquivo é apenas um arquivo parcial e que ele não deve ser compilado no CSS. Para importar essa parte parcial, basta adicionar o @import ao seu arquivo da seguinte forma:
@import 'partials/myPartial';
Então eu estou importando _myPartial.scss que está localizado em uma pasta chamada partials. Você não precisa incluir o sublinhado ou a extensão do arquivo. Sass é inteligente o suficiente para saber qual arquivo você quer dizer. O uso de parciais nos permite uma ótima maneira de modularizar nosso código, tornando-o mais portátil e mais fácil de manter.
Sass traz funções para a festa CSS. Eu sei que nem todo mundo é um programador e o conceito de uma função pode ser um pouco demais, mas não se preocupe, muitos acrescentam uma tonelada de recursos úteis, embora não sejam excessivamente complicados. No que diz respeito às cores, há várias outras úteis para manipulá-las, mas três se destacam como ganhos incríveis e fáceis para as pessoas que estão começando. Vamos ver como os usamos.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
A sintaxe é bem direta. Nas três funções acima você vê que temos dois argumentos para cada um. A primeira é a cor que queremos manipular. Isso pode ser um formato hexadecimal, RGB ou qualquer outro formato de cor que seja adequado ao CSS. Pode até ser uma variável. O segundo é o valor pelo qual queremos modificar essa cor. Faça 10% mais escuro, clarear em 5%, defina o alfa para 0,6. O resultado desta função é o valor que é definido no CSS compilado. Então lá embaixo você vê nossas funções no trabalho
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Espero que você já possa ver como isso pode ser útil. Há uma dúzia de maneiras de utilizar essas três funções para adicionar um contraste de cores bem legal e elas podem ser usadas em qualquer lugar que um valor de cor normalmente vá. Esses três são apenas a ponta do iceberg. Há muito mais funções de cores e muitas formas criativas que podem ser usadas.
Algumas coisas no CSS são um pouco tediosas para escrever. Mixins fazem grupos de declarações CSS que podemos reutilizar em todo o nosso site. Estilos CSS3 que exigem prefixos de fornecedores são um exemplo perfeito de quando usar um mixin. Em vez de digitar a mesma propriedade repetidamente, nós escrevemos um mixin uma vez e então chamamos esse mixin sempre que quisermos usá-lo. Para declarar um mixin usamos o @mixin palavra chave. Em seguida, damos um nome e aplicamos nossos estilos entre chaves, assim: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Os argumentos podem até ser passados para o mixin para torná-lo mais flexível. Para usar nosso mixin nós apenas usamos o @include palavra chave.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Como você vê no exemplo acima nós chamamos o nosso mixin com o @include seguido pelo nome do mixin e quaisquer argumentos entre parênteses. Pense em quanto tempo isso vai te salvar. Por que todo mundo não está usando isso?
Essas ferramentas foram ótimas, mas eu guardei o melhor para o final. @extend é um dos recursos mais úteis que nos permite compartilhar um conjunto de propriedades CSS de um seletor para outro. Pense em um par de botões, como um botão aceitar e recusar em uma janela modal. Como ambos são botões, eles provavelmente compartilham a mesma coisa, mas o botão recusar terá um fundo vermelho para destacá-lo. Com o Sass, escrevemos os estilos padrão para todos os botões e depois “estendemos” esses estilos para o botão de rejeição, onde adicionaríamos o fundo vermelho.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Cara, como é maravilhoso não ter que se repetir? Isso não apenas promove a modularização de nossos estilos, mas reduz o risco de os estilos serem desativados de um botão para outro. Este é um tempo enorme, poupe! Multiplique isso para todos os estilos do site e temos um prazo significativamente reduzido para escrever CSS.
Com todo o tempo que estamos economizando, talvez possamos aprender os aspectos mais complexos do Sass.
Espero tê-lo convencido a dar uma chance a essa incrível ferramenta e ilustrar alguns recursos que poderiam melhorar sua produtividade imediatamente. A verdade é que eu poderia escrever este artigo novamente amanhã e ter mais cinco recursos realmente interessantes para compartilhar. É tão incrível! Sass (e outros pré-processadores) estão aqui para ficar, então faça um favor e comece a usá-lo. Para os interessados em saber mais, confira esses recursos no twitter e na web:
Twits:
Webs:
E se você estiver na área Tri-condado do sul da Flórida, junte-se a nós no South Florida Sass Meetup .