Question

我有一个sass mix-in for angular to do list，可以在你去的时候减轻应用程序的颜色，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变暗

1 个答案: