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