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
2
3
4
5
6
7
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n

img
border-radius(10px)

Compila para:

1
2
3
4
5
img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

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
2
img
border-radius 10px

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
2
3
4
5
6
7
8
9
10
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

img
border-radius 10px/12px 10px

div
border-radius 10px 10px/12px 20px 5px

E isso vai compilar para:

1
2
3
4
5
6
7
8
9
10
img {
-webkit-border-radius: 10px/12px 10px;
-moz-border-radius: 10px/12px 10px;
border-radius: 10px/12px 10px;
}

div {
-webkit-border-radius: 10px 10px/12px 20px 5px;
-moz-border-radius: 10px 10px/12px 20px 5px;
border-radius: 10px 10px/12px 20px 5px;
}

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
2
3
4
5
6
7
8
9
10
primary-button()
background #fc0
color #fff

&:hover
color #f00

background #e2e2e2

.button-send
primary-button()

Que irá compilar:

1
2
3
4
5
6
7
8
.button-send {
background: #fc0;
color: #fff;
}

.button-send:hover {
color: #f00;
background: #e2e2e2;
}

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