Grammar usage of sass in sass series (2)

The last article introduced some method definitions and invocations of sass syntax, judgment statements, etc. This article will introduce sass's definition string template and loop statement, etc., aiming at how to use sass syntax to write css.

1. For loop and string template use

1) Syntax of for loop

@for variable ($i)  from the number of the start loop position to the number of the  end loop position { //loop logic}

2) String template

#{ variable }

3) for loop and string template Demo

If you can't understand what is written above, just take a look at the css code generated after compiling the demo above. I believe you can understand it more thoroughly.

/*for*/
.box_1 {
  width: 200px;
height: 200px;
border: #ff2330 solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }          

.box_2 {
  width: 200px;
height: 200px;
border: #ff2330 solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }          

.box_3 {
  width: 200px;
height: 200px;
border: #ff2330 solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }

2. While loop and string template use

In fact, the above while loop is the same as the for loop. I believe that you can guess the css code generated below when you see it here, so let's take a look.

/*while*/
.box_while_1 {
  width: 200px;
height: 200px;
border: #ff259e solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }          

.box_while_2 {
  width: 200px;
height: 200px;
border: #ff259e solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }          

.box_while_3 {
  width: 200px;
height: 200px;
border: #ff259e solid 1px;
border-radius: 5px;
margin: 10px;
float: left; }

3.each loop and string template use

/*each*/
$Imgs: "hx" "lx" "mx";
@each $img in $Imgs {
  .img_#{$img} {
    background-image: url('/img/#{$img}.jpg');
  }
}

生成的css文件（有了前面for与while的学习以及js基础，each就不做多做解释了）

/*each*/
.img_hx {
  background-image: url("/img/hx.jpg"); }

.img_lx {
  background-image: url("/img/lx.jpg"); }

.img_mx {
  background-image: url("/img/mx.jpg"); }

4.字符串模板的实际应用demo

$properties: (margin, padding); //定义变量
//定义方法
@mixin set-value($side, $value) {
  @each $prop in $properties { //遍历$properties
    #{$prop}-#{$side}: $value;
  }
}
.login-box {
  width: 300px;
  height: 200px;
  border: #ff2330 solid 1px;
  @include set-value(left, 30px); //调用方法
}

编译后的css文件

.login-box {
  width: 300px;
  height: 200px;
  border: #ff2330 solid 1px;
  margin-left: 30px;
  padding-left: 30px; }

好了，有写的不好的地方请评论指正。