控制指令

控制指令

1.if 当 @if 的表达式返回值不是 false 或者 null 时，条件成⽴，输出 {} 内的代码。

@if 声明后⾯可以跟多个 @else if 声明，或者⼀个 @else 声明。

如果 @if 声明失败，Sass 将逐条执⾏ @else if 声明，

如果全部失败，Y后执⾏ @else 声明

$w: 300px; 
$h: 100px;
 .box { 
 width: $w;  
 height: $h;
   background-color: red;
   @if $w==100px {
     border: 10px solid black;
   } @else if $w==200px { 
     border: 10px dotted black;  
 }@else { 
    border: 10px double black;
   }; } 

使用判断语句。。。。像函数

• @if 的表达式返回值不是 false 或者 null 时，条件成⽴，输出 {} 内的代码
• @if 声明后⾯可以跟多个 @else if 声明，或者⼀个 @else 声明
• 条件局限性很强，单个判断可以如: a>=200px

 

for

【讲解】之前我们想写⼀个元素中包裹多个⼦div，每个div都有⾃⼰的颜⾊时需要单独每个都给，⽐较 麻烦 可以使⽤sass中的for指令。 先写以⼀个需要⾃⼰写的包裹关系，ul>li*3 每个li颜⾊⾃⼰写
例⼦：
@for $i from 1 through 6 {  .list2>li:nth-child(#{$i}) { background-color: #333*$i; } }
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动  @for $var from 起始值 through 结束值