基于百分比加深 SCSS Mixin

Question

我有一个 sass 混入我的 angular 待办事项列表，它会随着你的使用使应用程序的颜色变亮，1 是深蓝色，50 是白色。

我怎样才能让悬停使每个项目的背景变暗 50-60%？

我的混入：

@mixin shades-of-blue ( $count, $startcolor ) {
    @for $i from 0 through $count {
        $background-color: lighten( $startcolor, $i + $i ); 

        .tasks:nth-of-type(#{$i}) {
            background-color: $background-color;
        }
    }    
}

@include shades-of-blue( 50, #2d89ef);

Answer 1

您可能应该使用 mix 而不是 lighten/darken，否则在 26 左右一切都是白色的。

@mixin shades-of-blue ( $count, $startcolor ) {
    @for $i from 0 through $count {
        $background-color: mix(white, $startcolor, $i + $i);

        .tasks:nth-of-type(#{$i}) {
            background-color: $background-color;

            &:hover {
              background-color: mix(black, $background-color, 50);
            }
        }
    }    
}

@include shades-of-blue( 50, #2d89ef);

您可以在这里尝试一下：http://sassmeister.com/

基于百分比加深 SCSS Mixin

Darkening a SCSS Mixin based on percentage

css

sass

mixins