Sass: Change color with @for loop

Question

I try to darken a variable number of divs like that with following code:

Answer 1

To just go from one color to another, for say, a number of consecutive

:

    @for $i from 0 through 11
        &:nth-child(#{$i})
            transform: rotate(#{30*$i}deg)
            background-color: mix($gray1, $gray2, $i / 12 * 100% )

Notes

• Note, that you don't need any #{…} inside the mix(), because it's a sass function, so it's clear that any variables and computations used insides are to be resolved before turning it into CSS.
• The transform is just my use case (for demonstration). Here, one does need #{…}
• and note the +/-1 issue (like in every for-loop, in any language): going from 0/12 to 11/12
• lastly, turning it into a percentage to please the mix function
• as you see: could be done in a mixin, but doesn't have to be!

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...