mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-24 18:36:41 +07:00
19 lines
No EOL
470 B
Markdown
19 lines
No EOL
470 B
Markdown
Say, we need to color `n` items by specific colors, which depend on its position. #SCSS supports [iteration over lists](https://sass-lang.com/documentation/at-rules/control/each) for that purposes:
|
|
|
|
```scss
|
|
@mixin color-per-child($colors) {
|
|
@each $color in $colors {
|
|
&:nth-child(#{index(($colors), ($color))}) {
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Usage is simple:
|
|
|
|
```scss
|
|
.item {
|
|
@include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));
|
|
}
|
|
``` |