Introdução a Sass

• Documentação Oficial - Sass Lang

Partials

• Sass Partials

São o básico de SCSS e Sass.

Pequenos pedaços de código CSS que podem ser colocados em arquivos e pastas diferentes, deixando o processo de criação de código mais modular e fácil de manter.

Partials devem começar com _, o que indica ao preprocessador que o arquivo não será compilado na pasta de destino.

Exemplo de estrutura

|- scss
|- main.scss
   |- components
      |- _buttons.scss
      |- _icons.scss
      |- _typography.scss
      |- _index.scss
   |- layout
      |- _header.scss
      |- _footer.scss
      |- _containers.scss
      |- _columns.scss
      |- _index.scss
   |- base
      |- _base.scss
      |- _index.scss

Arquivos do tipo <folder>/_index.scss dentro de cada pasta possuem uma série de @import quem devem importar para si todos os arquivos dentro de cada uma de suas pastas.

O @import de partials, porém, não deve ter _ no começo do nome dos arquivos, nem a extensão .scss como no exemplo:

<!-- layout/_index.scss -->
@import 'header';
@import 'container';

O arquivo final main.scss, por sua vez, deve possuir declarações @import que importa o conteúdo de todos os <folder>/_index.scss.

<!-- main.scss -->
@import 'layout/index';
@import 'components/index';
@import 'base/index';

Sendo o único arquivo sem _, será o único arquivo compilado pelo comando sass --watch scss:css ou por task runners como Gulp.

Extends (placeholders)

• Sass Extend Reference
• Placeholder Selectors
• Extend/Inheritance

Extends permitem a reutilização de regras e propriedades. Dentro de um arquivo chamado _extends.scss pode-se escrever:

%placeholder {
  color: #222;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 3px;
}

E então utilizá-lo onde for necessário.

.primary-content {
  @extend %placeholder
  <!-- outras regras -->
}

Assim todas as declarações (par propriedade-valor) da regra %placeholder serão aplicadas em .primary-content.

Se o extend for utilizado em mais de uma classe, será criado um conjunto de regras que seleciona todas as classes que contém o extend, onde o conteúdo dele é aplicado a elas.

Pode-se copiar uma regra inteira e utiliza-la da seguinte forma:

%clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

O &::after significa que a regra %clearfix será aplicada no pseudo-elemento ::after do elemento que conter o @extend %clearfix, sendo assim um tipo de placeholder.

Ou seja, se esse extend for aplicado na classe .primary-content, por exemplo, o css de saída será:

.primary-content {
 /* Other rules */
}

.primary-content::after {
 /* Extend rules */
}

Importante: Para os Extends funcionarem é preciso defini-los dentro do arquivo _index.scss da pasta onde eles se encontram através de um @import '', de preferência no final da lista para evitar problemas de especificidade.

Nesting

• Nesting

Se usado de forma correta, é uma maravilha. Permite uma melhor organização e leve modularização do código. Também permite o uso de & como um placeholder de um seletor pai.

Use com cuidado e apenas quando necessário.

.main {
  &-heading { ... }
  &-title { ... }
}

Saída:

.main-heading { ... }
.main-title { ... }

Note que fazendo nesting com & ocorre apenas uma substituição de termos e não há uma "encadeamento" de seletores.

Ou ainda:

.main-nav {
  ...
  li { ... }
  a { ... }
}

Saída:

.main-nav { ... }
.main-nav li { ... + ... }
.main-nav a { ... + ... }

Nesse caso há um encadeamento de seletores.

Variáveis

• Sass Guide
• Sass Docs

Variáveis podem armazenar o valor de qualquer propriedade.

De preferência devem ser estruturados como base/_variables.scss e ser o primeiro item a ser importado de todo o arquivo SCSS, antes de mixins e estilos base.

Cores

• Name that color

// Descriptive color variables

$white          : #fff;
$black          : #000;
$grey           : #878787;
$regent-st-blue : #add8e6;
$river-bed      : #48525c;
$yellow-orange  : #ffa949;

// Functional color variables

$color-prim         : $yellow-orange;
$color-sec          : $river-bed;

$color-text-light   : $white;
$color-text-base    : $grey;
$color-text-dark    : $river-bed;

$color-border-light : lighten($grey, 35%);
$color-border-dark  : $yellow-orange;

$color-link-default : $yellow-orange;
$color-link-visited : $regent-st-blue;

$color-shadow       : rgba($black,.8);
$color-body         : $white;

Font Stack

• Sass Font Stack Variables

$stack-sans-serif   : Helvetica, Arial, sans-serif;
$stack-helvetica    : 'Helvetica Neue', $stack-sans-serif;
$stack-abolition    : 'Abolition Regular', $stack-sans-serif;

Interpolação

• Sass Interpolação

É possível utilizar variáveis em seletores e strings utilizando interpolação:

$path-img: '../img';

img {
  background: url('#{$path-img}/name.jpg');
}

Ou

$name: foo;
$attr: border;

p.#{$name} {
  $attr-color: #abc;
}

É compilado em:

p.foo {
  border-color: #abc;
}

Variáveis ou Extends?

Ambos substituem valores e ajudam na manutenção do código, mas cada um tem seu uso.

Use variáveis se você precisar reutilizar um valor específico. Por exemplo, você terá vários elementos e classes com border-radius de 4px e você quer que ele seja consistente. Você pode criar uma variável como $border-radius-main com o valor desejado e então reutilizar onde precisar.

Seria algo como:

$border-radius-main: 4px;

.button {
  border-radius: $border-radius-main;
}

.another-class {
  border-radius: $border-radius-main;
}

O resultado é:

.button {
  border-radius: 4px;
}

.another-class {
  border-radius: 4px;
}

Use extends se você precisar reutilizar mais de uma declaração em elementos e classes que compartilhem declarações iguais. Por exemplo:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  background-color: red;
}

.info-icon {
  @extend %icon;
  background-color: green;
}

O resultado é:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  background-color: red;
}

.info-icon {
  background-color: green;
}

Mixins

• Sass Guide
• Sass Docs
• When to use @extend, when to use a mixin
• Smarter Sass Mixins with null

Adicionam um nível de abstração bem similar ao de uma função em linguagens de programação.

De preferência devem ser estruturados como base/_mixins.scss e invocados através de @include <mixin>(arg0, arg1, argN).

Vamos usar o exemplo da regra @font-face

// base/_mixins.scss
@mixin font-face($family, $file) {
  @font-face {
    font-family: $family;
    src: url('#{$path-font}/#{$file}-webfont.eot');
    src: url('#{$path-font}/#{$file}-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{$path-font}/#{$file}-webfont.woff') format('woff'),
         url('#{$path-font}/#{$file}-webfont.ttf') format('truetype');
  }
}

// components/_typography.scss
@include font-face('Abolition Regular', 'abolition-regular');

Isso será compilado como:

@font-face {
  font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}

Note como os valores de $family e $file são "injetados" dentro do mixin. É importante aqui também o uso de interpolação com #{$variable} para inserir os valores dentro das strings.

Mais operações com mixins

Vamos criar um mixin para fazer declarações comuns em seletores de fontes.

@mixin font($size, $l-height: null, $weight: null, $color: null) {
  font-size: $size;
  line-height: $l-height;
  font-weight: $weight;
  color: $color;
}

O valor null é adicionado às variáveis de uso opcional pelo Mixin. Ou seja, não declarar nada não causará erros.

Vamos substituir a seguinte regra CSS com o Mixin que acabamos de criar:

body {
  color: $color-text-base;
  margin: 0;
  font: 1em/1.5 $stack-helvetica;
}

// Fica assim

body {
  @include font (1em, 1.5, $color: $color-text-base);
  margin: 0;
  font-family: $stack-helvetica;
}

Note que utilizamos $color: $color-text-base. Isso porque quando não queremos declarar uma variável, precisamos dizer quel variável vamos modificar - no caso, a $color.

Por isso é preciso dizer explicitamente a que variável vamos atribuir o próximo valor, senão esse valor seria atribuído à variável que foi pulada.

Caso não haja uma quebra de ordem e não se quer utilizar uma variável, basta não utilizar nada. Por exemplo:

h1 {
  @include font (2.5em, 1.5, normal);
}

Sass e Media Queries

• Sass e Media Queries

Um bom uso de Sass com Media Queries é utilizar os breakpoints como variáveis:

$break-small: '(min-width: 769px)';

@media #{$break-small} {
  // ...
}

Pode-se colocar as media queries dentro dos respectivos partials a que pertecem em vez de se criar um partial exclusivo para eles.

Não é possível utilizar @extend em Media Queries.

Dicas Gerais

• Ao escrever uma regra SCSS a ordem das declarações deve ser:

  1. @extend
  2. @include
  3. Declarações restantes

• Pode-se usar sass --watch scss:css --style compressed para gerar CSS minificado, o método ideal de exportação para produção.

• Não é possível utilizar @extend dentro de uma media query.

• Não é preciso fazer o upload da pasta scss para o servidor, já que ele não pode ser lido pelo browser.

• Para debugging é melhor utilizar o mapa CSS de extensão .css.map para fazer debugging via ferramenta de desenvolvedor de um browser.

Ferramentas

• Sass Meister
• Codepen

Ferramentas de layout

• Susy
• Breakpoint
• Bourbon Neat

Bibliotecas de Mixins

• Bourbon
• Compass

Material de referência

• Sass-lang
• The Sass Way
• Sass Break