标签: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; }
标签:txt 循环输出 var font clu spl 混合开发 引用 include
原文地址:https://www.cnblogs.com/xiaojianwei/p/10501739.html