七色卡是慕課上的實戰，慕課的代碼加上我自己的理解做的。
- 效果
- HTML
<body>
//用js動態生成一個模板。
//因爲需要7個ul以及每個ul包含20個li標籤，當時考慮了是用js只生成li還是整個模板，因爲考慮到感覺直接生成一個整體不用獲取ul並且應該代碼量也和生成整個dom差不多，就選擇的後面一個。其他的理由，就沒有理由了...
</body>
<script>
var list = ["red","orange","yellow","green","blue","purple","black"];
for(var i = 0;i < list.length;i ++){
var ul = document.createElement("ul");
ul.setAttribute('class','swatches '+ list[i]);
for(var j = 0;j < 20;j ++){
var li = document.createElement('li');
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>- SCSS
//所有的七種顏色都是由第一個redBase根據hue變化得來的，這樣的好處就是可以通過改變一個redBase從而改變整個色卡
//lighten（我是提高亮度值） saturate（我是提高飽和度）adjust_hue（我是提高亮度）一個和他們相反的三種方法
$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;
//從第11個色塊往左亮度值遞增，往右亮度值遞減，所以使用兩個混合宏，一個遞增一個遞減
@mixin swatchesDarken($color) {
@for $i from 1 through 10 {
$x:$i + 10;//包括第11個色塊
li:nth-child(#{$x}) {
$n:$i * 5;
$bgc:darken($color,$n);
background-color: $bgc;
&:hover:before {//展示色塊的16進制值
content: "#{$bgc}";
color: lighten($bgc,40);
}
}
}
}
@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);
}
}
}
}
.swatches li{
width: 5%;
float: left;
display: inline-block;
height: 60px;
list-style: none ;
}
.swatches li:hover:before{
font-family: verdana;
font-size: 8px;
padding: 5px;
}
//通過each（）方法給每一個類 添加對應mixin調用
$list:(red:$redBase,orange:$orangeBase,yellow:$yellowBase,green:$greenBase,blue:$blueBase,purple:$purpleBase,black:$blackBase);
@each $class,$val in $list{
.#{$class}{
@include swatchesDarken($val);
@include swatchesLighten($val);
}
} 其實大多數還是慕課的內容，我只是對最後使用了each簡化，以及提取了：before的相同內容，和使用了js生成dom模板。然後內心有一個聲音再告訴我，還可以簡單還可以簡單，只是我不知道只是我不知道，哈哈。希望隨着在學習代碼也會進步，啦啦♪(^∇^*)