跳到主要内容

语法

2023年09月19日
柏拉文
越努力，越幸运

一、&​

二、变量​

$width: 100px;

.container{
    width: $width;
}

三、插值​

$width: 100px;
$prevClass: 'bolawen';

.#{$prevClass}{

}

.container{
    width: calc(100% - #{width});
}

四、if​

$count: 3;

.container{
    width: if($count > 2, 100px, 200px);
}

五、+ -​

六、* /​

七、for​

7.1 from A to B​

from to 从 A 开始循环，但是不包括 B

@for $i from 1 to 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}

编译后的 CSS 代码

.width1 {
  width: 10px;
}

.width2 {
  width: 20px;
}

7.2 from through​

from to 从 A 开始循环，但是包括 B

@for $i from 1 through 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}

编译后的 CSS 代码

.width1 {
  width: 10px;
}

.width2 {
  width: 20px;
}

.width3 {
  width: 30px;
}

八、each​

九、while​

十、mixin​

十一、media​

十二、extend​

十三、import​

十四、at-root​

at-root

语法

.text{
  @at-root body #{&} {
      color: red;
  }
}

十五、function​