This is the 14th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

I believe that many students usually pull down to find a color picker to complete the skin switch. Have you ever thought of another way to increase freshness and user experience? In this issue, we will make a skin switching function of color type system. The whole project is built by Vite, and JS logic and binding are written with Petite-Vue, but our focus is on how to draw these with SCSS. Let’s start with the Kangkang effect:

How to use clip-path to draw a pencil, how to change the global color of JS, etc. What are you still wait for

The body of the

1. Basic structure

<body>
	<div class="pencil"></div>
</body>
Copy the code
: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));
}
Copy the code

We’re going to put a div.pencil in the body and we’re going to use it to draw a pencil. Of course, we’re going to draw a grid background all over the screen, and the background color is white by default.

2. Draw crayons

@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;
}
Copy the code

First, we use clip-path to make an irregular shape to write the outline of the pencil shape, which is similar to the PATH of SVG. Just find the corresponding vertices. Apply @extend %shape into the pencil. Let’s not paint the background black first to see if the outline is correct.

We added color to it through background gradient. Of course, in order to make it easier to change the color, we used cSS3 variable, –skin-color as the main color and –skin-line as the dividing color.

.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)); }Copy the code

This completes the body of the colored lead, and next, we will use the pseudo-class to complete his head.

.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); }}Copy the code

The tip of the pen is divided into two parts, before is used to complete the wood part and after is used to complete the core part. Because it is inside the clip-path, the superfluous parts of what you write inside will be cut out. So don’t worry about the problem of crossing boundaries, with absolute positioning at ease bold to do it.

In this way, we have finished the green color lead. Next, we will explain the use of Petite-Vue and SCSS to complete 24 different color brushes.

3. Batch generation

Let’s introduce Petite-Vue, whose binding syntax is basically the same as VUE, with no learning costs.

<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>
Copy the code

So we’ve got 24 brushes, but they’re all pretty uniform, and we’re going to put them on the far right side of the plane and we’re going to cut off a piece.

html.body{
    // ...
    flex-direction: column;
    align-items: flex-end;
    // ...
}
Copy the code

Let’s change the elastic box so that it’s arranged lengthwise, and it’s oriented to the far right.

.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%); }}}Copy the code

So let’s do a move animation. Then, the next step is the key to generate different colors. We traversed the 24 colored lead and endowed them with different colors. In order to be more natural, WE used HSL color plate to complete the task, and randomly selected different lengths to make the table clutter more real.

4. Switch events

We switch the system color by changing the root variable that we started with –bg-color. The expectation is to change the color value by moving in or clicking the brush. So, we first bind events to the color lead.

<div class="pencil" v-for="(item,index) in 24" :key="index" @mouseMove="getSkinColor" @click="getSkinColor"></div>
Copy the code
createApp({
    getSkinColor(e){
        let bgColor = getComputedStyle(e.target).getPropertyValue('--skin-color') | |"white";
        document.documentElement.style.setProperty('--bg-color',bgColor )
    }
}).mount()
Copy the code

GetComputedStyle (el).getPropertyValue(name) gets the CSS variable of his color lead, and then we change the variable of root via style.setProperty.

So that’s it, and we’re done, but it’s pretty simple, online demo.

conclusion

This episode is a creative effect, I don’t know if there is any gain after watching it, such as how to expand SCSS, how to traverse, how to randomly value and so on. Also, have you found that Petite-Vue is very lightweight? Would you like to explore it further? I am also throwing a brick to attract jade, I hope students can write more creative effect, together refuelling duck ~