sass补充（2019-3-9）

Posted 2021-02-12 xiaojianwei

@each 输出

格式:

@each $var in value，value1,value2{

}

eg:

@each $var1 in 100px,200px,300px{
　　.box{
　　width:$var1;
}
}

//结果

.box{
width:100px;
}

.box{
width:200px;
}

.box{
width:300px;
}

当然，@each的变量还可以写多个，不过要和后面的内容向对应。

@each $a,$b,$c in ((ab,es,cdd),(cd,da,add)){
  .a{
    background: $a;
    color:$b;
    width: $c;
  }
}

//结果

.a {
  background: ab;
  color: es;
  width: cdd;
}

.a {
  background: cd;
  color: da;
  width: add;
}

@while 循环输出内容

格式：

@while $a>0{}

eg:

$i:5;
@while $i > 0{
  .box{
    background: $i;
  }
  $i:$i - 1;
} 

//结果

.box {
  background: 5;
}

.box {
  background: 4;
}

.box {
  background: 3;
}

.box {
  background: 2;
}

.box {
  background: 1;
}

混合开发@mixin

eg：

// @mixin 混合引用
$num1:10;
@mixin txt{
  font:{
    size:$num1+px;
    weight:$num1*10; 
  };
  color:#fff;
  &:hover{
    display: none;
  }
}


// 直接使用不能在里面加父选择器
.pd{
  @include txt();
  width: 100%;
}

@mixin txt2{
  .box{
    font:{
      size:10px;
  }
  z-index: $num1*100;
  }
}

@include txt2();

// 混合模式的参数设定

@mixin txt3($var1,$var2){
  .#{$var1}{
    background: $var2;
  }
}

@include txt3(box,url("img/1.png"));

// 混合模式参数的默认值

@mixin txt4($var1:div,$var2:#fff){
.#{$var1}{
  color: $var2;
}
}

@include txt4(xxx,#121212);

 

混合开发案例结果

.pd {
  font-size: 10px;
  font-weight: 100;
  color: #fff;
  width: 100%;
}
.pd:hover {
  display: none;
}

.box {
  font-size: 10px;
  z-index: 1000;
}

.box {
  background: url("img/1.png");
}

.xxx {
  color: #121212;
}