这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战
介绍
相信很多同学做皮肤切换往往都是下拉找个颜色选择器来完成，有没有想过换一种方式，来增加新鲜感和用户体验。本期将会做一个套彩铅版系统皮肤切换功能，整个项目由vite搭建，用petite-vue写js逻辑和绑定，但我们的重点还是怎么去用scss绘制出这些来。先让我们康康效果吧：
不知道你有思路了没，后面将向大家讲解，scss怎么去扩展和遍历，如何用clip-path绘制一支铅笔，js是如何改变全局颜色等方面的内容，还等什么，我们这就出发~
正文
1.基本结构
<body>
<div class="pencil"></div>
</body>
:root{
--bg-color:white;
}
html,body{
width: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-image: repeating-linear-gradient(90deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(90deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),linear-gradient(90deg, var(--bg-color),rgb(255,255,255));
}
我们先在body中放一个div.pencil等下我们就用他先绘制出一支铅笔来，当然我们先写个网格背景铺满全屏，其中底色默认是白色。
2.绘制彩笔
@use "sass:math";
$len:280px;
$h:28px;
$num:24;
%shape {
clip-path: polygon(
50px 0,
0 50%,
50px 100%,
calc(100% - 8px) 100%,
100% calc(100% - 8px),
100% 8px,
calc(100% - 8px) 0
);
}
.pencil {
@extend %shape;
margin:2px;
width: $len;
height: $h;
position: relative;
box-sizing: border-box;
background-color: #000;
}
我们先用clip-path做个不规则图形写出铅笔的轮廓shape，这里有点类似于svg的path，找到对应的几个顶点即可。用 @extend %shape引入到铅笔里面，我们先别背景涂成黑色先康康轮廓是否正确。
我们通过background渐变再给其添加颜色,当然我们后面为了让其修改颜色比较方便用了css3的变量， --skin-color为主色，--skin-line为分界线颜色。
.pencil {
--skin-color:#71a86b;
--skin-line:#50744c;
// ...
background: linear-gradient(
var(--skin-color) 7px,
var(--skin-line) 8px,
var(--skin-color) 7px,
var(--skin-color) calc(100% - 8px),
var(--skin-line) calc(100% - 7px),
var(--skin-color) calc(100% - 8px)
);
}
这样彩铅的笔身就完成了，接下来，我们会用伪类来完成他的头部。
.pencil {
&::before {
content: "";
@extend %shape;
position: absolute;
box-sizing: border-box;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 54px;
height:$h;
background-color: #f3c7b4;
}
&::after {
content: "";
z-index: 2;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: $h;
border-radius: 50%;
background-color: var(--skin-color);
}
}
笔头分两部分，用before来完成削出来的木头部分和用after完成笔芯部分。因为在clip-path内部的原因，所以你写在里面的东西多余部分都会裁切掉。所以不用担心过界的问题，用绝对定位放心大胆地搞吧。
这样我们一直绿色的彩铅就完成了，接下来我们将会讲解一下用petite-vue与scss配合完成24支不同颜色的画笔。
3.批量生成
我们引入一下petite-vue，其绑定语法基本上和vue一样，没什么学习成本。
<body>
<div class="pencil" v-for="(item,index) in 24" :key="index"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
}).mount()
</script>
</body>
这样我们就生成了24支画笔，但是颜色都很单一，而且我们还要把放到平面最右面且还要截掉一块。
html,body{
// ...
flex-direction: column;
align-items: flex-end;
// ...
}
我们先就改下弹性盒子让其纵向排布，而且方向变成最右。
.pencil {
right: -30px;
transition: .2s right;
&:hover{
right: -15px;
}
@for $i from 1 through $num {
&:nth-child(#{$i}) {
width:#{$len - math.div($len, 2) * random()};
--skin-line:hsl(#{math.div(360, $num) * $i}, 70%, 70%);
--skin-color:hsl(#{math.div(360, $num) * $i}, 60%, 50%);
}
}
}
我们先写个移入动画。然后后面一步遍历才是生成不同颜色的关键，我们遍历这24支彩铅，赋予其不同的颜色，为了更加自然，使用hsl色盘来完成，并且也随机出了不同长度，显得桌面杂乱更加真实。
4.切换事件
我们切换系统颜色，其实就是更改一开始的--bg-color这个root的变量。期望的是移入或者点击画笔就更改其色值。所以，我们先在彩铅上绑定事件。
<div class="pencil" v-for="(item,index) in 24" :key="index" @mouseMove="getSkinColor" @click="getSkinColor"></div>
createApp({
getSkinColor(e){
let bgColor = getComputedStyle(e.target).getPropertyValue('--skin-color') || "white";
document.documentElement.style.setProperty('--bg-color',bgColor )
}
}).mount()
我们用getComputedStyle(el).getPropertyValue(name)就可以拿到他的彩铅的css变量，然后我们再通过style.setProperty更改root的变量。
写到这里，就已经大功告成了，还是很简单吧，在线演示。
结语
本期算是一个创意效果吧，不知道同学看完是否有些收获，比如scss怎么扩展，怎么遍历，怎么随机取值等等。还有发没发现petite-vue非常的轻巧，要不要去深入探索一下。本身我也是在抛砖引玉吧，希望同学们能写出有更多的创意效果，一起加油鸭~
