Eles permitem definir estilos que podem ser re-utilizados em todo o estilo, sem necessidade de recorrer a classes não-semânticas. Mixins também pode conter regras CSS completas, e qualquer outra coisa permitida em outras partes de um documento Sass. Eles podem até mesmo ter argumentos que lhe permite produzir uma ampla variedade de estilos, com muito poucos mixins.

Quando algum trecho de css for repetitivo, vale pena analisar, e se necessário criar mixins para reaproveitar esse código em outros elementos.

Pra saber mais detalhes sobre mixins, vale a pena conferir a documentação.

Para criar um novo mixin basta inserí-lo no arquivo mixins.sass.

Nomenclatura

Recomendamos que a nomenclatura seja clara e evite abreviaturas. O ideal é que o nome do mixin já indique sua funcionalidade.

Não usar: =absTL(...)

Assim é melhor: =absoluteTopLeft(...)

Conheça os mixins do Locaweb Style

Setas

$arrow-color = cor da seta
$arrow-size = tamanho da seta

=arrow-up($arrow-color, $arrow-size)

=arrow-right($arrow-color, $arrow-size)

=arrow-down($arrow-color, $arrow-size)

=arrow-left($arrow-color, $arrow-size)

Box com seta para cima

Círculo com ícone

Normalmente utilizado no :before do elemento.

$size = largura e altura
$font-size = tamanho da fonte do ícone

=border-circle($size, $font-size)

Dados da conta

Gradiente Linear

$start-color = Cor inicial
$end-color = Cor final

=gradient-linear($start-color, $end-color)

Bordas arredondadas

=border-radius-default - utilizado para definir cantos arredondados e padronizados de elementos do Locawe Style.

Largura de bordas no fim de elemento

=border-bottom-default - largura da borda utilizada no fim de alguns elementos. Utilizado em abas e boxes de sidebar.