颜色函数实战——七色卡

Posted 2020-08-05 悬崖上的公主

颜色函数实战——七色卡

由于平台编辑器功能有限，下面这个实战项目需要小伙伴们，在自己配置好的 sass 环境的机子上自己操作。下面把项目的步骤教给大家：

常见的颜色就是七彩色，红、橙、黄、蓝、绿、紫、黑。那么我们就使用 Sass 的颜色函数来制作一个这样的色卡。效果图如下：

第一步：编写 html 网页代码

<ul class="swatches red">     <li></li>       ...           <li></li> </ul> <ul class="swatches orange">     <li></li>       …     <li></li> </ul> <ul class="swatches yellow">     <li></li>        …     <li></li> </ul> <ul class="swatches green">     <li></li>           …     <li></li> </ul> <ul class="swatches blue">     <li></li>         …     <li></li> </ul> <ul class="swatches purple">     <li></li>         …     <li></li> </ul>

结构不做过多的描述。下面我们来看 Sass 实现色卡代码如何写：

第二步：定义七色变量

首要的就是变量，此处设置了一个红色系的变量值，然后其他色系的变量值，都是通过嵌套颜色函数完成：

//定义变量 $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

色卡是有很多种颜色的，我们需要在一个颜色的基础上，让颜色在亮度上做一个调整（当然也可以是在饱和度上），因此我们需要定义两个 mixins：

//定义颜色变暗的 mixin @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 { //hover状态显示颜色编号                 content: "#{$bgc}";                 color: lighten($bgc,40);                 font-family: verdana;                 font-size: 8px;                 padding: 2px;             }         }     } } //定义颜色变亮的 mixin @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;             }         }     } }

第三步、调用 mixin

完成上面的工作，只需要根据所需进行调用，生成色卡：

.swatches li {         width: 4.7619047619%;     float: left;     height: 60px;     list-style: none outside none; }  ul.red {     @include swatchesLighten($redBase);     @include swatchesDarken($redBase);     li:nth-child(11) {         background-color: $redBase;     } }  ul.orange {     @include swatchesLighten($orangeBase);     @include swatchesDarken($orangeBase);     li:nth-child(11) {         background-color: $orangeBase;     } }  ul.yellow {     @include swatchesLighten($yellowBase);     @include swatchesDarken($yellowBase);     li:nth-child(11) {         background-color: $yellowBase;     } }  ul.green {     @include swatchesLighten($greenBase);     @include swatchesDarken($greenBase);     li:nth-child(11) {         background-color: $greenBase;     } }  ul.blue {     @include swatchesLighten($blueBase);     @include swatchesDarken($blueBase);     li:nth-child(11) {         background-color: $blueBase;     } }  ul.purple {     @include swatchesLighten($purpleBase);     @include swatchesDarken($purpleBase);     li:nth-child(11) {         background-color: $purpleBase;     } }  ul.black {     @include swatchesLighten($blackBase);     @include swatchesDarken($blackBase);     li:nth-child(11) {         background-color: $blackBase;     } } 

这样就完成了色卡的制作。

完整代码可见 http://sassmeister.com/gist/f055f8497c8c51067f1f。