sass系列之sass的语法使用(二)

上一篇介绍了一些有关sass语法的方法定义与调用，判断语句等。本篇将介绍sass的定义字符串模板与循环语句等，旨在如何使用sass语法编写css。

1.for循环与字符串模板使用

1）for循环的语法 

@for 变量($i) from 开始循环位置的数 to 结束循环位置的数{  //循环逻辑  }

2）字符串模板

#{变量}

3）for循环与字符串模板Demo

如果上面写的不能理解的话，就看一下上面Demo编译后生成的css代码吧,相信就能理解透彻一些了

/*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循环与字符串模板使用

其实上面的while循环与for循环是一样的，相信看到这里，你也能够猜的出来下面生成的css代码了，那就来看一下吧

/*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循环与字符串模板使用

/*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; }

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