sass补充(2019-3-9)

Posted xiaojianwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sass补充(2019-3-9)相关的知识,希望对你有一定的参考价值。

@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;
}

 

以上是关于sass补充(2019-3-9)的主要内容,如果未能解决你的问题,请参考以下文章

学习sass小结(不定期更新补充...)

scss SASS片段

scss Sass片段:响应视频

Sass学习笔记(补充)

vs 2010代码片段

vs 2010代码片段