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

2022-09-08 17:42:34 浏览数 (1)

目录

  • 条件语句
  • 循环语句
条件语句

语法格式

代码语言：javascript复制
@if (条件){
   //语句体
}
@else if(){
   //语句体
}
@else{
}

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

代码语言：javascript复制
p{
    @if(true){
        border:1px solid red
    }
    @else{
        border:1px solid blue
    }

}
//编译后
#main {
  border: 1px solid red; }
循环语句

for循环

语法格式

代码语言：javascript复制
@for  $i from start end{
    //....
    //引用索引 #{i}
    
}
代码语言：javascript复制
@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循环

代码语言：javascript复制
$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接收一个列表

代码语言：javascript复制
@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; }
for循环 语法

0 人点赞