Some gossip about SASS

Difference between @extend and @mixin

1. @extend is not flexible enough to pass arguments.

@extend can only pass code snippets, while @mixin can pass parameters.

If that’s all there is to it, then some people might think, WELL, I should just use @mixin. Mo Fang, number two.

2. The compilation results are different.

The main difference between @extend and @mixin, which both allow us to use style fragments, is that using @extend produces DRY (Donot Repeat Youself) style code.

Such as:

%part{
  position: absolute;
  border-radius: 50%;
}

.box1{
  width: 30px;
  height: 30px;
  background: #ccc;
  @extend %part;
}
.box2{
  width: 10px;
  height: 10px;
  background: # 000;
  @extend %part;
}
Copy the code

The compiled result is:

.box1..box2 {
  position: absolute;
  border-radius: 50%;
}

.box1 {
  background: #ccc;
}

.box2 {
  background: # 000;
}
Copy the code

We found that the style fragment did not repeat. But @mixin can’t produce DRY code.

@mixin part{
  position: absolute;
  border-radius: 50%;
}

.box1{
  background: #ccc;
  @include part;
}
.box2{
  background: # 000;
  @include part;
}
Copy the code

Compile result:

.box1 {
  background: #ccc;
  position: absolute;
  border-radius: 50%;
}

.box2 {
  background: # 000;
  position: absolute;
  border-radius: 50%;
}
Copy the code

SASS random function random()

1. Direct userandom()

Direct use will generate a 0-1 random number, generally there will be 4-5 decimal.

.box {
  opacity: random();	
}
Copy the code

Output:

.box {
  opacity: 0.59874; // generate random}Copy the code

2. Send parameters

Random () accepts an integer greater than or equal to 1. If the value is less than 1 or not an integer, an error is reported.

.box {
  font-weight: random(200);	 // Randomly generate integers between 1 and 200
  font-weight: random(2.5);	 Expected $limit to be an integer but got 2.5 for 'random'
}
Copy the code

Use random numbers. If you want to follow units, you can connect them with a + sign, or you can wrap them with interpolation #{}, for example:

.box {
  width: random(100) + px;
  height: #{random(100)}px;
}
Copy the code

However, random() does not concatenate the % symbol. To generate random percentage numbers, use the following percentage() function.

SASS percentage function ()

The percentage() function converts numbers to percentages. Such as:

.box {
  width: percentage(.6)}Copy the code

The output is:

.box {
  width: 60%;
}
Copy the code

If the random number + percentage can be written like this:

.box {
  width: percentage(random(100) / 100)}Copy the code

The output is:

.box {
  width: 60%; The /* value is randomly generated */
}
Copy the code

SASS for loop

One of two ways

There are two ways in the for loop:

@for $i from through
@for $i from to
Copy the code

$I is the variable. Start is the starting value. End is the end value. Such as:

@for $i from 1 through 3{
  .box:nth-child(#{$i}){
    width: 100px; }}Copy the code

The compiled result is:

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 100px;
}

.box:nth-child(3) {
  width: 100px;
}
Copy the code

@for $i from 1 to 3{
  .box:nth-child(#{$i}){
    width: 100px; }}Copy the code

The compiled result is:

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 100px;
}
Copy the code

@for loop instance

Sprite image background traversal

We often combine ICONS of a relatively large size into a Sprite image. Generally, the background positioning of this Sprite image is regularly followed, such as:

@for $i from 0 through 2{
  .icon-# {$i+ 1} {background-position: # {$i* -30}px 0; }}Copy the code

The compiled result is:

.icon-1 {
  background-position: 0px 0;
}
.icon-2 {
  background-position: -30px 0;
}
.icon-3 {
  background-position: -60px 0;
}
Copy the code

SASS custom function @function

Sass supports custom functions and can be used in any attribute value or Sass script: for example:

@function pxToRem($px) {
  @return ($px / 100) * 1rem;
}
.text {
  font-size: pxToRem(240);
}
Copy the code

Compile result:

.text {
  font-size: 2.4 rem;
}
Copy the code

When we need to generate multiple styles (multiple shadow, multiple gradients), using @function to help us generate can save a lot of work. Such as:

@function gradient($i.$n) {
  $start: 25px;
  $end: 50px;
  $deg: 360 / $i;
  $val: repeating-linear-gradient(#{$deg}deg, transparent 0% 10%.# 000 10% 20%);
  @for $n from 1 through $n {
    $val: $val, repeating-linear-gradient #{$deg * $n}deg,transparent 0% $start.# 000 $start $end);
  }
  @return $val;
}

.part {
  width: 200px;
  height: 200px;
  background: linear-gradient(#98d.#69f);
  -webkit-mask-image: gradient(7.5);
  -webkit-mask-composite: xor;
  border-radius: 50%;
  content: "";
}

Copy the code

Generate results:

.part {
  width: 200px;
  height: 200px;
  background: -webkit-gradient(linear, left top, left bottom, from(#98d), to(#69f));
  background: linear-gradient(#98d.#69f);
  -webkit-mask-image: repeating-linear-gradient(51.42857 deg, transparent 0% 10%.# 000 10% 20%), 
    repeating-linear-gradient(51.42857 deg, transparent 0% 25px.# 000 25px 50px),
    repeating-linear-gradient(102.85714 deg, transparent 0% 25px.# 000 25px 50px),
    repeating-linear-gradient(154.28571 deg, transparent 0% 25px.# 000 25px 50px),
    repeating-linear-gradient(205.71429 deg, transparent 0% 25px.# 000 25px 50px),
    repeating-linear-gradient(257.14286 deg, transparent 0% 25px.# 000 25px 50px);
  -webkit-mask-composite: xor;
  border-radius: 50%;
  content: "";
}
Copy the code

SASS NTH list function

Grammar:

nth($list,$n)
Copy the code

The NTH () function is used to specify a value at a position in the defined list. Such as:

$colorList: orange, blue, green;
p {
  color: nth($colorList.1);
}
Copy the code

Compile result:

p {
  color: orange;
}
Copy the code

When we have a list and need different attributes, we can use the traversal + list function to quickly generate the corresponding values. Such as:

$colorList: #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342 #689f38 #558b2f #388e3c;

@for $i from 1 through 9{
  .item:nth-child(#{$i}){
    background: nth($colorList.$i); }}Copy the code

The result is as follows:

.item:nth-child(1) {
  background: #dcedc8;
}

.item:nth-child(2) {
  background: #c5e1a5;
}

.item:nth-child(3) {
  background: #aed581;
}

.item:nth-child(4) {
  background: #9ccc65;
}

.item:nth-child(5) {
  background: #8bc34a;
}

.item:nth-child(6) {
  background: #7cb342;
}

.item:nth-child(7) {
  background: #689f38;
}

.item:nth-child(8) {
  background: #558b2f;
}

.item:nth-child(9) {
  background: #388e3c;
}
Copy the code