sass学习三--控制指令和表达式

2017-09-14 11:33:22来源:CSDN作者:u012841667人点击

分享

1、if

.article{    padding:if(1+1 !=2, 20px , 30px);}
编译后

.article {  padding: 30px; }

2、@if @else if  @else

@if返回除false  null 之外的任何结果

$a:bbb;p{ @if($a == aaa){ 	color:#fff; }@else if($a == bbb){ 	color:#ddd; }@else{ 	color:red; }}
编译后

p {
  color: #ddd; }

3、@for

注意拼接字符串使用#{$value}

如果是from to, 10,20,30

@for $i from 1 through 4{	.item#{$i}{ 		padding: $i * 10px;	}}
编译后

.item1 {  padding: 10px; }.item2 {  padding: 20px; }.item3 {  padding: 30px; }.item4 {  padding: 40px; }

4、@each

@each $i in -webkit,-moz,-o{    p{	display: #{$i}-box;    }}
编译后

p {  display: -webkit-box; }p {  display: -moz-box; }p {  display: -o-box; }

多个分配

@each $value,$key in (red,10px),(blue,20px),(#ddd,30px){    p{	color:$value;	padding:$key;    }}
编译后

p {  color: red;  padding: 10px; }p {  color: blue;  padding: 20px; }p {  color: #ddd;  padding: 30px; }

对象形式的多分配
@each $value,$key in (span:10px,p:20px,h1:30px){    #{$value}{	padding:$key;    }}
编译后

span {  padding: 10px; }p {  padding: 20px; }h1 {  padding: 30px; }


5、@while

$value:0;@while $value <= 10 {    p-#{$value}{	font-size:$value;    }    $value: $value + 5;}
编译后

p-0 {  font-size: 0; }p-5 {  font-size: 5; }p-10 {  font-size: 10; }





最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台