笔记

Appearance

大纲

流程控制 ​

控制指令 ​

@if ​

@if 的表达式结果非 false 和 null 时，条件成立

语法

sass
@if <expression>
    // result
@else if <expression>
    // result
@else
    // result

示例

sass
$theme: "dark"

.base-color
    @if $theme == bright
        color: grey
    @else if $theme == dark
        color: snow
    @else
        @error "错误的 $theme: #{$theme}"

编译为

css
.base-color {
  color: snow;
}

@for ​

语法 (以下 $var 表示任意变量， <start> 和 <end> 需要是整数)

  • @for $var from <start> through <end>: 条件范围包含 <start> 与 <end> 的值
  • @for $var from <start> to <end>: 条件范围包含 <start> 而不含 <end> 的值

示例

sass
$max-font-size: 26px
@for $i from 1 through 6
    .h#{$i}
        font-size: $max-font-size - $i * 2

编译为

css
.h1 {
  font-size: 24px;
}

.h2 {
  font-size: 22px;
}

.h3 {
  font-size: 20px;
}

.h4 {
  font-size: 18px;
}

.h5 {
  font-size: 16px;
}

.h6 {
  font-size: 14px;
}

@each ​

语法

  • 一维列表: @each $var in <list>, $var 在遍历时代表 <list> 中的每个元素
  • 二维列表: @each $var1, $var2, ... in (<list1>), (<list2>), ...
    • 被遍历的列表其元素个数应保持一直，否则会被当做空值处理
    • $var1, $var2, ... 代表被遍历 <list> 中对应的元素
  • 遍历 maps: @each $key, $val in <maps>: <maps> 是 ($key1: $val1, $key2: $val2, ...) 格式的数据

示例

sass
$success: success, blue, success
$failure: failure, red, failure

@each $state, $color, $icon in $success, $failure
    .--#{$state}
        color: $color
        background: url('./imgs/icon/#{$icon}.png')

编译为

css
.--success {
  color: blue;
  background: url("./imgs/icon/success.png");
}

.--failure {
  color: red;
  background: url("./imgs/icon/failure.png");
}

@while ​

语法

sass
@while <expression>
    // result

示例

sass
$i: 1

@while $i <= 6
    .h#{$i}
        font-size: 26px - $i*2
        @if $i > 3
            font-weight: normal
    $i: $i + 1

编译为

css
.h1 {
  font-size: 24px;
}

.h2 {
  font-size: 22px;
}

.h3 {
  font-size: 20px;
}

.h4 {
  font-size: 18px;
  font-weight: normal;
}

.h5 {
  font-size: 16px;
  font-weight: normal;
}

.h6 {
  font-size: 14px;
  font-weight: normal;
}

函数指令 ​

使用 @function 指令进行函数的声明，sass 提供了许多内置的函数，可参考 文档

语法

sass
// 声明
@function <fnName>(<$var>)
    @return ...
// 调用
<fnName>(<$var>)  // 直接调用
<fnName>($var: <$var>) // 传入关键词调用，会忽略参数顺序

示例

sass
@function getColumns($width)
    @if $width >= 1200
        @return 12
    @if $width >= 960
        @return 8
    @if $width >= 720
        @return 6

@media screen
    .main
        display: grid
        @media (min-width: 1280px)
            grid-template-columns: repeat(getColumns($width: 1280px), 1fr)
        @media (min-width: 768px)
            grid-template-columns: repeat(getColumns(768px), 1fr)

编译为

css
@media screen {
  .main {
    display: grid;
  }
}

@media screen and (min-width: 1280px) {
  .main {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .main {
    grid-template-columns: repeat(6, 1fr);
  }
}

调试指令 ​

@debug ​

语法: @debug <expression>

  • 描述: 将表达式(通常时执行语句)执行结果输出在控制台的输出流中，通常用于开发调试
  • 注意: 该指令不会终止编译

@warn ​

语法: @warn <expression>

  • 描述: 将表达式(通常是警告信息)执行结果输出在控制台的输出流中，通常用于信息提示
  • 注意
    • 该指令不会终止编译
    • 指定 --quiet command-line 选项可以关闭警告

@error ​

语法: @warn <expression>

  • 描述: 将表达式(通常时错误信息)执行结果及 stack trace 输出在控制台的输出流中
  • 注意: 该指令执行时会终止编译