Sass之@at-root,flow-control,output,css

@at-root

使用 @at-root <selector> { ... }，样式规则会脱离嵌套。

如果多个样式规则需要使用 @at-root，可以用 {} 包裹合并

@at-root {
  <selector1> { ... }
  ...
  <selectorN> { ... }
}

使用 @at-root 默认不能突破 CSS @rules 的嵌套。 可以使用 with 和 without 修改嵌套规则。

• with: <rules> 表示只被 rules 嵌套，
• without: <rules> 表示不被 rules 嵌套。

rules 取值：

1. CSS @rules 去掉 @ 比如 media。
2. 特殊值 rule 表示所有的样式规则
3. 特殊值 all 表示 CSS @rules + rule

// index.scss
@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: #111;
    }

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}

/* index.scss */
@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: #111;
}
.page {
  font-size: 1.2em;
}

控制流

逻辑值

只有 false 和 null 为逻辑假，不能通过判断，其他值都是真。

条件判断

@if, @else, @else if

循环

@for

从一个数字遍历到另一个数，

@for A to B，从 A 到 B 不包括 B。 @for A through B，从 A 到 B 包括 B。

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@while

只在不适用 @each 和 @for 的情况下使用。

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

@each

用于遍历 list 和 map 及其他结构化数据

// list
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

// map
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

// 其它结构话数据
// 根据位置关系解析，如果找不到数据会填充 `null`
$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}

输出

@debug

输出信息，类似于 console.log。

@warn

输出警告信息，类似于 console.warn。比如版本更迭时提醒用户迁移。

@error

输出错误信息，并中断编译过程。

css @rules

1. Sass 兼容所有的 CSS @rules。
2. 如果 CSS @rules 被嵌套，编译时会自动交换位置，@rules 依然在最外层。
3. CSS @rules 中支持使用插值
4. 多层 @media 嵌套，会导致 @media 规则合并。