Stylus - Usando Mixins
Depois do primeiro post mostrando toda a lindeza do Stylus, como ele funciona, e as vantagens que ele tem sobre outros pré-processadores, nesse novo artigo da série, vamos ver como utilizar todo o poder dos mixins dentro do Stylus! Bora? ;)
Mixins
Você define mixins e functions no Stylus da mesma maneira, mas eles tem diferentes tipos de aplicações.
Mixins são invocados como declarações (statements). Um mixin vai servir basicamente para adicionar um trecho de código CSS no seu seletor. Veja o exemplo:
1 | border-radius(n) |
Compila para:
1 | img { |
Criamos um mixin chamado border-radius
, que recebe no parâmetro n
, um valor para border-radius. Quando invocamos o mixin dentro do nosso seletor, ele imprime tudo o que foi declarado no corpo desse mixin.
Nós podemos ainda invocar o mixin sem os parênteses:
1 | img |
Que irá compilar o mesmo resultado :)
Note que, dentro do mixin border-radius
, temos uma chamada à propriedade CSS border-radius
, mas ela é tratada como uma propriedade CSS mesmo, e não como a invocação de uma função recursiva. O Stylus é muito esperto! :D
Mas ainda podemos ir além: sabendo que Stylus é Javascript, podemos nos aproveitar do arguments
para passar vários valores para o mixin, assim como faríamos com funções em Javascript:
1 | border-radius() |
E isso vai compilar para:
1 | img { |
arguments
é um valor implítico em funções Javascript, onde é definido uma coleção dos argumentos passados para a função. Dessa forma, você não precisa ter um valor de parâmetros definido para o seu mixin :D
Parent Reference
Podemos usar Parent Reference, que vimos no artigo anterior, também nos mixins:
1 | primary-button() |
Que irá compilar:
1 | .button-send { |
Temos outras milhões de possibilidades de uso para os mixins!
Para saber mais, visite: http://learnboost.github.io/stylus/docs/mixins.html
Dúvidas? Comente!
Até o próximo! :D
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