Mixin: background-stripes
teles opened this issue · comments
Teles commented
Falar sobre o mixin background-stripes, que cria listras horizontais em css.
@mixin background-stripes($stripes-direction, $stripes-colors...) {
$stripes-list: ();
@for $i from 1 through length($stripes-colors){
$stripe-number-prev: #{100%/length($stripes-colors) * ($i - 1)};
$stripe-number: #{100%/length($stripes-colors) * $i};
$stripe-color: nth($stripes-colors, $i);
$stripe-declaration-prev: $stripe-color $stripe-number-prev;
$stripe-declaration: $stripe-color $stripe-number;
$stripes-list: append($stripes-list, $stripe-declaration-prev, comma);
$stripes-list: append($stripes-list, $stripe-declaration, comma);
}
background-image: linear-gradient($stripes-direction, $stripes-list);
}
- Exemplos de uso
- Lógica do código do mixin
- Falar sobre manipulação de vetores em sass
- Falar sobre lista de argumentos em mixins sass
Importante: Se você gostou dessa ideia, deixe seu like ou comentário nessa issue.