SCSS

1. 说明

官网： https://sass-lang.com/ (opens new window)

在线编译器： https://www.sassmeister.com/ (opens new window)

2. @for

@for $i from 1 through 2 {
  ul:nth-child(#{$i}) {
    background-color: red;
  }
}

编译为：

ul:nth-child(1) {
  background-color: red;
}

ul:nth-child(2) {
  background-color: red;
}

3. @if

示例：

div {
    $flag: false;
    
    @if $flag == false {
        margin: 0;
    }
    
    @if $flag == true {
        padding: 0;
    }
}

编译为：

div {
  margin: 0;
}

4. 操作符

示例：

// 相等
@debug 1px == 1px; // true
@debug 1px != 1em; // true


// 关系
@debug 100 > 50; // true
@debug 96px >= 1in; // true

@debug 10px < 17px; // true
@debug 1000ms <= 1s; // true


// 数字运算
div {
    margin: 3px + 2px;  // 5px
    margin: 3px - 2px;  // 1px
    margin: 3px * 2;    // 6px;
    margin: (10px / 3); // 3.3333333333px;
    margin: 10px % 3;   // 1px  取余
}


// 字符串
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";

@debug true + " is a boolean value"; // "true is a boolean value";


// 布尔
@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

5. @mixin & @include

示例：

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, 4px);

  /* 两者等价 */
  @include square($size: 100px, $radius: 4px);
}

编译为：

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  /* 两者等价 */
  width: 100px;
  height: 100px;
  border-radius: 4px;
}