Stylus - Palavras chave em argumentos

Já vimos como é fácil criar mixins e functions no Stylus. Mas como os parâmetros podem ser passados para obtermos os resultados esperados? Vem comigo que eu te mostro ;)

O Stylus suporta keyword arguments, ou “kwargs”. Isso significa que você não precisa manter a mesma ordem dos parâmetros quando invocar uma function ou um mixin, e inclusive pode fazer algumas variações um bastante diferentes. Vamos ver nos exemplos para ficar mais claro:

1
2
3
4
5
6
body {
  color: rgba(255, 200, 100, 0.5);
  color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);
  color: rgba(alpha: 0.5, blue: 100, red: 255, 200);
  color: rgba(alpha: 0.5, blue: 100, 255, 200);
}

Que irá compilar:

1
2
3
4
5
6
body {
  color: rgba(255,200,100,0.5);
  color: rgba(255,200,100,0.5);
  color: rgba(255,200,100,0.5);
  color: rgba(255,200,100,0.5);
}

Se você ainda não conhece o Stylus, recomendo que leia o primeiro artigo da série, para que você possa montar seu ambiente e colocar o Stylus pra rodar :)

O Stylus tem uma função embutida (_Built-in Function), chamada rgba, que retorna o valor CSS para rgba.

Essa função aceita 4 parâmetros: red, green, blue e alpha. Como você pode ver no exemplo acima, na primeira chamada de color, fazemos no padrão do CSS, chamando os parâmetros na ordem em que eles devem ser chamados.

Na segunda chamada de color, nós nomeamos os parâmetros, ainda mantendo a ordem. E, como você pode ver, a compilação é a mesma.

Agora olhe que loucura: na terceira chamada, os parâmetros não estão em ordem, mas ainda assim as coisas compilam como deveriam, pois o Stylus sabe exatamente onde deve colocar cada valor, pois nomeamos os argumentos!

E mais interessante: perceba que o último argumento não está nomeado!

Então como o Stylus sabe onde deve ir esse valor?

Como já tinhamos nomeado alpha, blue e red, o único argumento que sobrou foi o green. Logo, esse valor só pode ser dele ;)

Agora veja a quarta chamada: temos somente dois valores nomeados. Quando isso acontece, o Stylus atribui os valores dos argumentos nomeados, e os que não estão nomeados, ele coloca na ordem em que deveriam ser chamados na function ou mixin, excluindo apenas os que já foram passados com nome.

Olhe novamente para a última chamada:

1
color: rgba(alpha: 0.5, blue: 100, 255, 200);

Os valores para alpha e blue o Stylus já tem. A ordem para passar os parâmetros é:

1
rgba(red, green, blue, alpha)

Então ainda faltam os valores para red e green, que receberão, respectivamente, os próximos valores :D

Mas como eu faço para saber qual a ordem que eu devo passar os parâmetros?

O Stylus tem uma função chamada p(), que retorna como o mixin ou a function foram criados.

Se você colocar no seu arquivo Stylus:

1
p(rgba)

Você terá como retorno no seu terminal:

1
inspect: rgba(red, green, blue, alpha)

E isso funciona também para os mixins e functions criados por você! :D

Da hora não?

Aproveite essa incrível ferramenta e até o próximo artigo :)

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1