学习笔记2--用Sass快速生成颜色表

最新推荐文章于 2025-07-03 00:03:54 发布

原创最新推荐文章于 2025-07-03 00:03:54 发布 · 847 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Sass #CSS

Sass 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用Sass编写的高效颜色生成器，仅用不到一百行代码即可生成复杂颜色表，通常CSS实现该功能需千行以上代码。通过定义几种基本颜色并结合Sass的混合功能，实现了颜色的渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//定义一些变量（红橙黄绿蓝紫黑）：

$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
$blackBase: #777;
$bgc: #fff;

//定义两种混合（变亮 & 变暗）：

@mixin swatchesDarken($color){
    @for $i from 1 through 10{
        $x:$i + 11;
        li:nth-child(#{$x}){
            $n:$i*5;
            $bgc:darken($color,$n);
            background-color:$bgc;
            &:hover:before{
                content: "#{$bgc}";
                color: lighten($bgc,40);
                font-family: verdana;
                font-size: 8px;
                padding: 2px;
            }
        }   
    }
}

@mixin swatchesLighten($color) {
    @for $i from 1 through 10 {
        $x:11-$i;
        li:nth-child(#{$x}) {
            $n:$i*5;
            $bgc:lighten($color,$n);
            background-color: $bgc;
            &:hover:before {
                content: "#{$bgc}";
                color: darken($bgc,40);
                font-family: verdana;
                font-size: 8px;
                padding: 2px;
            }
        }
    }
}

//清除浮动的样式：

.clearfix:after, .clearfix:before{
    content:"";
    height:0;
    visibility:hidden;
    display:block;
}
.clearfix:after{
    clear:both;
}

//给每个ul和li规定初始样式：

ul{
    padding:0;
    margin:0
}
ul li{
    width:35px;
    height:60px;
    float:left;
    list-style:none;
}

//定义两个列表：

$list:red orange yellow green blue purple black;
$csslist:$redBase $orangeBase $yellowBase $greenBase $blueBase $purpleBase $blackBase;

//为每个ul和li添加颜色：

@for $i from 1 through 7{
    ul.#{nth($list,$i)} {
        @include swatchesLighten(nth($csslist,$i));
        @include swatchesDarken(nth($csslist,$i));
        li:nth-child(11) {
            background-color: nth($csslist,$i);
        }
    }
}

这样，Sass不到一百行的代码就可以实现CSS需要1000+行代码才可以实现的颜色表。

HTML：

ul*7>li*21 //ctrl + E
       //<ul class="clearfix #color">