TIps: The source code of this article has been hosted to the Code cloud (Gitee)Here’s the link
First I wish you a happy National Day duck
A lot of people couldn’t find me yesterday, actually I went to……
The price of noodles is not expensive, 50 a bowl can be an egg and a sausage. Add a wechat to calculate hahaha
Kudos to those who watched nuggets study during the National Day holiday
Without further ado, let’s get down to business
Today we are going to take a look at SCSS, the hot technology, with a small project on Veryveryvery Simple
The preview looks like this:
A bunch of gift boxes with different ribbons and boxes in different colors. Scss is then used to randomly fill in the colors and coordinates
The concept of Scss
First of all, what is an Scss
Here’s the official explanation:
The most mature, stable, and powerful professional CSS extension language in the world!
(Link to Chinese document here)
He has the following characteristics:
CSS compatible, feature rich, mature, industry recognized, large community, framework……
Personal understanding is actually let CSS write also have computing power and logic code. Easy to manage CSS code and editing
2. The HTML code
First, let’s set up the HTML code
<div class="present"> // External box <div class="cap"></div> // box cover <div class="vribbon"></div> // vertical ribbon <div class="hribbon"></div>Copy the code
The hierarchy is simple
3. Build a basic CSS framework
Here, we write using flex layout. Because later there will be many boxes in the same row. And keep it newline
* {
html, body {
width: 100%;
height: 100%;
background-color: # 222; // Set the background color to blackmargin: 0; display: flex; //flex layout flex-wrap: wrap; // Wrap the elastic box elements when necessary}}Copy the code
Then we set the CSS style for the body of the outer box. Here we choose extract as a method. Because you’re going to have different colors, different transformations. Dynamic parameters are required
@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {
width: $size; You can declare a local variable as well as a global variable height:$size;
position: relative;
background-color: $bodyColor; Box-shadow: 0px 0px 20px Rgba (black, 0.5); transform: rotate($rotateDeg);
margin: 10px;
.vribbon, .hribbon {
background-color: $ribbonColor;
}
.cap {
background-color: $bodyColor; }}Copy the code
@mixin stands for declaring a method. You can call the @mixin method within the element CSS that you want to call after you’ve written it. He’ll compile it and insert it
You can also pass in a variable. You can then set the initial value for the variable. Such as
@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {Copy the code
And Scss supports hierarchy nesting based on HTML hierarchy. This will make writing and looking more organized
The example call without @include means using a method:
.present {
@include present()
}Copy the code
Example calls have parameters:
.present2 {
@include present(120px, #2853ff, #ffd428, 40deg)
}Copy the code
After compiling without arguments:
.present {
width: 100px;
height: 100px;
position: relative;
background-color: #ff5151;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
transform: rotate(0deg);
margin: 10px
}
.present .hribbon, .present .vribbon {
background-color: #fff
}
.present .cap {
background-color: #ff5151
}Copy the code
After compiling with parameters:
.present2 {
width: 120px;
height: 120px;
position: relative;
background-color: #2853ff;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
transform: rotate(40deg);
margin: 10px
}
.present2 .hribbon, .present2 .vribbon {
background-color: #ffd428
}
.present2 .cap {
background-color: #2853ff
}Copy the code
Display effect:
A red box frame
Next we write horizontal and vertical ribbons. I just colored the ribbon
. Vribbon {// width: 15%; height: 100%; position: absolute; left: 50%; // Top: 0; transform: translateX(-50%); }. Hribbon {// width: 100%; height: 15%; position: absolute; left: 0; top: 50%; Transform: translateY(-50%); }Copy the code
There’s a little trick here. This can happen when you try to use positioning to center elements
That’s because. When we use top:50%, the top border of the element aligns with the horizontal axis of the parent element. Instead of the element’s horizontal line, align the parent element’s horizontal line
So we can use transform: translateY(-50%); Make corrections. Move the element up 50% of its height
Left :50% Use the same translateX attribute
Let’s see what happens when we shadow the ribbon
.vribbon,.hribbon {box-shadow: 0 0 20px rgba(black, 0.5)}Copy the code
Tip: In the SASS/SCSS processor. Colors can use predefined English names (such as black, white, green). However, normal CSS processors do not support this. complains
Now let’s draw the lid
.cap { height: 15%; width: calc(100% + 10px); // Make both sides of the lid 5px wider than the box position: Absolute; left: 0; top: 0; transform: translateX(-5px); // Since it will be left aligned, we move it left 5px box-shadow: 0 0 20px rgba(black, 0.5); }Copy the code
A complete box is then drawn
4. Write logic
First, let’s define a set of color variables. In SCSS, $represents a declared variable. And then his value
$colorRed: #f24;
$colorWhite: #fff;
$colorBlue: #3364f7;
$colorYellow: #ffd221;
$colorPurple: #c747ff;
$colors: ($colorRed.$colorWhite.$colorBlue.$colorYellow.$colorPurple);Copy the code
In this case, the () in $colors represents a collection. Inside are the variable names.
Next, we use a loop to randomly specify the box size, ribbon color, and box color
In SCSS, a loop can use @for with the following syntax:
@for $i from 1 through 50 Copy the code
Where $I stands for variable. The value follows each loop +1 and you can use this variable in the loop. The value after from is the initial value. The through is the maximum. @for only allows you to define initial and maximum values using integers
We specify a set of initialization variables at the beginning of the for loop
$size: random(50)+50; // Box size$rotateDeg: random(20)-10; // Rotate the Angle$bodyColor: nth($colors, random(5)); // Box body color$ribbonColor: nth($colors, random(5)); // Ribbon colorCopy the code
Where, random represents the generation of random numbers. The parameter is the maximum value. If you have a parameter start at 0
NTH: selects the specified element in a collection and retrieves it by subscript. So let’s use random to randomly generate coordinates from 0 to 5
Next, we call the style:
.present#{$i} {
@include present(#{$size}px, $bodyColor, $ribbonColor,#{$rotateDeg}deg)
}Copy the code
#{} means I can concatenate variable names in {}. It’s going to compile and insert into it
Then prepare 50 boxes of code, each with a frame class name in numerical order. You don’t have to prepare a few
<div class="present1">
<div class="cap"></div>
<div class="vribbon"></div>
<div class="hribbon"></div>
</div>
<div class="present2">
<div class="cap"></div>
<div class="vribbon"></div>
<div class="hribbon"></div>
</div>
......
<div class="present50">
<div class="cap"></div>
<div class="vribbon"></div>
<div class="hribbon"></div
</div>Copy the code
Of course, I use Vue. You can do a V-for loop
<div :class="'present'+i" v-for="i in 50">
Copy the code
Here’s how it works:
emmm…… It feels so ugly. Not quite what we expected
In fact, we can see that some of the boxes overlap with the ribbon color. Cause it to look very ugly
We can put a judgment inside the @for loop. If the resulting ribbon color is the same as the box color, we will regenerate the ribbon color
@if ($ribbonColor= =$bodyColor) {
$ribbonColor: nth($colors, random(5));
}
.present#{$i} {
@include present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)
}Copy the code
@if stands for logical judgment in SCSS
So let’s see what happens
So we’re done
Welcome you little brother little sister collection, attention, like oh. Wish a happy National Day
Sass Chinese document
Sass and Scss have similarities and differences
Sass and Scss collocation are recommended