Sass学习（四）--高级语法

目录

• 条件语句
• 循环语句

条件语句

语法格式

@if (条件){
   //语句体
}
@else if(){
   //语句体
}
@else{
}

运算符
not:取反
&&/and:且
or:或
条件语句

p{
	@if(true){
	    border:1px solid red
    }
    @else{
        border:1px solid blue
    }

}
//编译后
#main {
  border: 1px solid red; }

循环语句

for循环
语法格式

@for  $i from start end{
    //....
    //引用索引 #{i}
    
}

@for $i from 1 to 10{
    .border-#{$i}{
        border:#{$i}px solid red
	}
}
//编译后
.border-1 {
  border: 1px solid red; }

.border-2 {
  border: 2px solid red; }

.border-3 {
  border: 3px solid red; }

.border-4 {
  border: 4px solid red; }

.border-5 {
  border: 5px solid red; }

.border-6 {
  border: 6px solid red; }

.border-7 {
  border: 7px solid red; }

.border-8 {
  border: 8px solid red; }

.border-9 {
  border: 9px solid red; }

while循环

$i:6;
@while ($i>0){
	border-#{$i}{border:#{$i}px solid red}
	$i:$i - 1;

}
//编译后
border-6 {
  border: 6px solid red; }

border-5 {
  border: 5px solid red; }

border-4 {
  border: 4px solid red; }

border-3 {
  border: 3px solid red; }

border-2 {
  border: 2px solid red; }

border-1 {
  border: 1px solid red; }

each
each接收一个列表

@each $num in [1,2,3,4,5,6]{
	border-#{$num}{
	border:#{$num}px solid red
	}
}
//编译后
border-1 {
  border: 1px solid red; }

border-2 {
  border: 2px solid red; }

border-3 {
  border: 3px solid red; }

border-4 {
  border: 4px solid red; }

border-5 {
  border: 5px solid red; }

border-6 {
  border: 6px solid red; }