码迷,mamicode.com
首页 > 其他好文 > 详细

sass补充(2019-3-9)

时间:2019-03-09 16:42:35      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:txt   循环输出   var   font   clu   spl   混合开发   引用   include   

@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)

标签:txt   循环输出   var   font   clu   spl   混合开发   引用   include   

原文地址:https://www.cnblogs.com/xiaojianwei/p/10501739.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!