学习笔记2--用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 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<
4000
/span> $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">