CSS moderno com Sass - tutorial prático.

Graças aos pré-processadores CSS, é possível escrever CSS de forma muito mais eficaz. O que são esses pré-processadores, quais existem e por que a escolha recaiu sobre Sass nesta série, são mostrados neste vídeo.

Antes de ser usado, o Sass deve ser instalado. E o pré-requisito para isso é o Ruby. Ambos - ou seja, a instalação do Ruby e do Sass - são mostrados neste vídeo. Em seguida, você pode testar imediatamente se a instalação do Sass foi realmente bem-sucedida.

Os sass devem ser convertidos em arquivos CSS para que sejam realmente utilizáveis. Graças ao comando watch, vocês conseguem identificar facilmente as alterações em arquivos individuais ou em diretórios inteiros.

Através do @import, é possível importar e combinar arquivos SCSS. O que tudo isso tem a ver com um sublinhado no início do nome do arquivo é um aspecto deste vídeo.

Em Sass, existe a possibilidade de declarar variáveis. Este conceito não está disponível no CSS convencional, mas em Sass é um meio genial para o desenvolvimento eficaz de folhas de estilo.

Graças à aninhamento, é possível manter a sintaxe do Sass muito mais enxuta do que é habitual no CSS. A aninhamento ajuda vocês também a escrever código de forma muito mais organizada.

O uso de @extend permite que você transmita um conjunto de propriedades CSS de um seletor para outro. Isso também ajuda a manter os arquivos Sass enxutos.

O seletor de espaço reservado permite a definição de módulos. Esta modularização permite a divisão da sintaxe Sass em blocos lógicos que podem ser incluídos em diferentes lugares.

Mixins são funções que permitem simplificar significativamente processos de trabalho, por exemplo. Neste vídeo, será mostrado como podem definir e, por fim, aplicar os seus próprios mixins.

Com o seletor em questão neste vídeo, você pode acessar o elemento pai de um elemento. Esse seletor não está disponível no CSS e, portanto, oferece um valor significativo.

Sass permite o uso de loops For. Isso funciona de forma bem simples no Sass e pode ser usado, por exemplo, para definir um sistema grid personalizado.

Além de For, em Sass também podem ser utilizados loops Each e While. Como isso pode ser usado para automação é mostrado neste vídeo.

Em linguagens como PHP e JavaScript, existe a possibilidade de reagir a diferentes eventos usando if e else. Isso também é possível em Sass. Como isso pode ser usado é mostrado neste vídeo.

Vocês podem calcular em Sass. Isso é prático, por exemplo, em relação à definição de tamanhos de fontes. Graças aos operadores correspondentes, também é possível construir seu próprio sistema de grid totalmente personalizado.

Claro que é possível definir cores em Sass. No entanto, o Sass vai muito além nessa área do que o CSS convencional. Graças às funções correspondentes, por exemplo, é possível manipular cores com muita facilidade.

O framework Compass expande as possibilidades do Sass em muitos aspectos. Este primeiro vídeo mostra como você pode instalar e usar o Compass.

O site do projeto Compass é o principal meio de informação quando se trata de trabalhar com este framework. Vou mostrar a vocês como trabalhar com a documentação usando os recursos CSS3 do Compass.

Um exemplo mostra o quão fácil as coisas podem ser implementadas com o Compass. No final desta série, também será dada uma olhada em um framework Sass alternativo. Susy oferece um sistema de grid enxuto.