SASS 制作七色卡

最新推荐文章于 2019-11-20 21:57:09 发布

Lalala这是我的小马甲哦

最新推荐文章于 2019-11-20 21:57:09 发布

阅读量1k

点赞数

分类专栏： SASS

本文链接：https://blog.csdn.net/realDE/article/details/54710469

版权

SASS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

七色卡是慕课上的实战，慕课的代码加上我自己的理解做的。

效果

这里写图片描述

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);
    }
}