根据百分比加深 SCSS Mixin

【问题标题】：Darkening a SCSS Mixin based on percentage根据百分比加深 SCSS Mixin
【发布时间】：2015-03-24 20:14:23
【问题描述】：

我有一个 sass mix-in 用于我的 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);

【问题讨论】：

标签： css sass mixins

【解决方案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/

【讨论】：

太棒了！按我的意愿工作，感谢您的帮助！