Quando usar mixins, extensões e variáveis ​​Sass

Recentemente, tive uma conversa no Twitter que me lembrou que o que é aparente para alguns velhos chapéus pode ser obscuro para aqueles que estão apenas mergulhando em Sass. Aqui estão minhas regras básicas sobre quando usar mixins, extensões e variáveis.

Variáveis

Use uma variável quando você tiver um único valor que deseja armazenar. Por exemplo:

$color: #444;
$width: 4em;

.module { 
  color: $color; 
}

Compila para:

.module {
  color: #444; 
}

Estende

Use @extendquando quiser armazenar várias propriedades estáticas e passá-las aos seletores:

.module { 
  background: #fff;
  color: #444; 
}

.main_module { 
  @extend .module;
  min-height: 3em;
}

.sidebar_module { 
  @extend .module;
  min-height: 2em;
}

Compila para:

.module, .main_module, .sidebar_module {
  background: #fff;
  color: #444; 
}

.main_module { 
  min-height: 3em;
}

.sidebar_module { 
  min-height: 2em;
}   

Mixins

Mixins sempre compilam as regras CSS onde aparecem no código. Onde um @extendgera mais seletores, @mixinsempre gera mais regras. Observe o acima como uma combinação:

módulo @mixin {
background: #fff;
cor: # 444;
}

.main_module { 
  @include module;
  min-height: 3em;
}

.sidebar_module { 
  @include module;
  min-height: 2em;
}

Compila para:

.main_module { 
  background: #fff;
  color: #444; 
  min-height: 3em;
}

.sidebar_module { 
  background: #fff;
  color: #444; 
  min-height: 2em;
}   

É por isso que para regras estáticas é frequentemente (nem sempre) menos incômodo de usar @extend.

Como regra geral, eu só uso mixins para fazer coisas “matemáticas”. “Se não precisa passar variável, não precisa ser um mixin” é o meu lema:

@mixin module($parent-color) { 
  color: darken($parent-color, 50%); 
}

.main_module { 
  @include module(#ccc);
  min-height: 3em;
}

.sidebar_module { 
  @include module(#444);
  min-height: 2em;
}

Compila para algo como:

.main_module { 
  color: #999; 
  min-height: 3em;
}

.sidebar_module { 
  color: #000; 
  min-height: 2em;
}