Funções nativas no Sass

Introdução
Keyword arguments
Funções interessantes

Introdução

Além de suportar funções nativas do CSS, o Sass também tem suas próprias funções nativas. Elas podem ser chamadas da mesma forma que as funções de CSS são chamadas: informando o nome da função, e os argumentos entre parênteses, separados por vírgulas. Exemplo:

.button {
  color: complement(#55aa1b);
  background-color: lighten(black, 20%);
  border: 2px solid black;
}

.button {
  color: #701baa;
  background-color: #333333;
  border: 2px solid black; }

Keyword arguments

Os argumentos das funções do Sass tem nomes. As funções podem ser chamadas informando os nomes dos argumentos. Esse tipo de passagem de argumento à função que inclui o nome do argumento é chamado de keyword argument. Um keyword argument é inserido como se fosse uma variável, só que sem ponto e vírgula:

$button-background-color: black;

.button {
  color: complement(#55aa1b);
  background-color: lighten($color: $button-background-color, $amount: 20%);
  border: 2px solid black;
}

.button {
  color: #701baa;
  background-color: #333333;
  border: 2px solid black; }

Usar keyword arguments deixa as chamadas de funções mais verbosas, porém bem mais fáceis de entender. Keyword arguments podem ser passados em qualquer ordem. Além disso, argumentos com valores padrões podem ser omitidos. Isso faz com que eles sejam bem úteis em funções com muitos argumentos.

Funções interessantes

Para lidar com cores:

lighten($color, $amount): Torna uma cor mais clara. A $amount é um percentual.
darken($color, $amount): Torna uma cor mais escura.
grayscale($color): Converte uma cor para grayscale.
complement($color): Retorna o complemento de uma cor
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]): Aumenta ou diminui um ou mais componentes de uma cor.
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]): Muda um ou mais componentes de uma cor.

Para lidar com números:

round($number): Arredonda um número para o inteiro mais próximo.

Para lidar com listas:

nth($list, $n): Retorna um item específico em uma lista.
set-nth($list, $n, $value): Substitui o enésimo item em uma lista.
join($list1, $list2, [$separator, $bracketed]): Une duas listas. A menos que $separator seja passado, se uma lista é separada por vírgulas e outra é separada por espaços, o separador do primeiro parâmetro é usado. Se as duas listas tem menos que dois itens, espaços são usados. Os valores que podem ser passados para $separator são comma, space ou auto (padrão). A menos que $bracketed seja informado, a lista resultante é colocada entre colchetes apenas se a primeira estiver entre colchetes.
append($list, $val, [$separator]): Adiciona um valor ao fim da lista.
index($list, $value): Retorna a posição de um valor em uma lista.

Para lidar com mapas:

map-get($map, $key): Retorna o valor de um mapa associado à chave fornecida.
map-merge($map1, $map2): Une os dois mapas.
map-remove($map, $keys...): Retorna um mapa com as chaves removidas.
map-keys($map): Retorna uma lista das chaves do mapa.
map-values($map): Retorna uma lista de todos os valores no mapa.
map-has-key($map, $key): Retorna se o mapa tem um valor associado com a chave dada.

Para lidar com funções:

keywords($args): Retorna um mapa com keyword arguments passados para uma função que tem argumentos variáveis.

Funções de introspecção:

content-exists(): Retorna se um bloco de conteúdo foi passado ao mixin atual.
unit($number): Retorna a unidade associada com um número.
unitless($number): Retorna se um número tem unidades.

Para ver todas as funções, procure na documentação das funções nativas do Sass .

Deixe seu review