首页 文章

根据百分比使SCSS Mixin变暗

提问于
浏览 次
1

我有一个sass mix-in为我的角度待办事项列表，在你去的时候减轻应用程序的颜色，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);
css sass mixins

1 回答

  • 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/

    回复于

相关问题