一、流程控制

1、@if 指令

  示例：根据 $theme 的值，我们设置了不同的背景颜色和文本颜色

$theme: dark;

body {
  @if $theme == light {
    background-color: #fff;
    color: #333;
  } @else if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else {
    // 如果没有匹配的条件
    background-color: #ddd;
    color: #555;
  }
}

body {
  background-color: #333;
  color: #fff;
}

2、@for 指令

  -@for指令常常与 Scss 的 字符串插值语法 一起使用

$colors: #ff5733, #33ff57, #5733ff, #ff33b2;

@for $i from 1 through length($colors) {
  .bg-color-#{$i} {
    background-color: nth($colors, $i);
    padding: 10px;
    margin: 5px;
    color: #fff;
  }
}

.bg-color-1 {
  background-color: #ff5733;
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-2 {
  background-color: #33ff57;
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-3 {
  background-color: #5733ff;
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-4 {
  background-color: #ff33b2;
  padding: 10px;
  margin: 5px;
  color: #fff;
}

3、@each 指令

  示例：通过 @each 循环为不同的字体大小生成样式

$font-sizes: (
  small: 12px,
  medium: 16px,
  large: 20px,
  x-large: 24px
);

@each $size, $value in $font-sizes {
  .font-#{$size} {
    font-size: $value;
    line-height: 1.5;
    margin-bottom: 10px;
  }
}

.font-small {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.font-medium {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.font-large {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.font-x-large {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 10px;
}

4、@while 指令

  示例：使用 @while 指令来生成一系列带有逐渐增加透明度的背景颜色

$bg-color: #3498db; // 初始背景颜色
$opacity-step: 0.1; // 透明度步长
$i: 1; // 初始计数器

@while $i <= 5 {
  .bg-color-#{$i} {
    background-color: rgba($bg-color, $i * $opacity-step);
    padding: 10px;
    margin: 5px;
    color: #fff;
  }

  $i: $i + 1; // 更新计数器
}

.bg-color-1 {
  background-color: rgba(52, 152, 219, 0.1);
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-2 {
  background-color: rgba(52, 152, 219, 0.2);
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-3 {
  background-color: rgba(52, 152, 219, 0.3);
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-4 {
  background-color: rgba(52, 152, 219, 0.4);
  padding: 10px;
  margin: 5px;
  color: #fff;
}

.bg-color-5 {
  background-color: rgba(52, 152, 219, 0.5);
  padding: 10px;
  margin: 5px;
  color: #fff;
}

二、Scss 运算

  Sass 语法支持基本的运算符（例如：and、or、not；==、!=、<、>、<=、>=；+、-、*、/、%；

  并且通常情况下，一般是数字与带单位的数据进行运算

• %百分号单位和其他单位（px、pt等等）无法一起参与运算
• 出现两个相同的%、px单位等等之间的运算是不被允许进行乘法运算的
• /除法运算间最好加上()，不然可能会被认为它仅仅是一个分隔符

1、算术运算

  在 Scss 中可以直接编写算术表达式，不用像 css 那样还要使用 calc()函数包裹

div {
  margin-left: 5px + 8px / 2;
}

2、支持变量

$width: 100px;
$padding: 10px;

.element {
  width: $width + $padding; // 110px
  margin-right: $width - $padding; // 90px
}

3、支持括号

$container-width: 960px;
$column-width: 200px;

.column {
  width: ($column-width / $container-width) * 100%; // 20.83%
}

4、支持函数

div {
  z-index: round(10) / 2;
}

拓展：自定义函数 ✨

@function row-cols-width($column) {
  @return percentage(1 / $column);
}

@for $i from 1 through 6 {
  .row-cols-#{$i} > * {
    width: row-cols-width($i);
  }
}

@function background-linear-gradient($direction, $gradient...) {
  @return linear-gradient($direction, $gradient);
}

body {
  background-image: background-linear-gradient(to right, red, green, blue);
}

三、Scss 函数

官方文档：

详见 内置模块 (opens new window)

1、Color 颜色函数

  sass 包含很多操作颜色。例如：

① 增加、降低$color 的 HSL 亮度

  让颜色变暗，通常使用 color.scale()替代方案。

lighten($color, $amount) //=> color
darken($color, $amount) //=> color

• 使用

@debug lighten(#6b717f, 20%); // #a1a5af（Lightness 46% becomes 66%）
@debug lighten(#036, 60%); // #99ccff（Lightness 20% becomes 80%）
@debug lighten(#e1d7d2, 30%); // white（Lightness 85% becomes 100%）

@debug darken(#b37399, 20%); // #7c4465（Lightness 92% becomes 72%）
@debug darken(#f2ece4, 40%); // #b08b5a（Lightness 85% becomes 45%）
@debug darken(#036, 30%); // black（ightness 20% becomes 0%）

② 减少颜色透明度

  降低颜色透明度，通常使用 color.scale()替代方案。

opacify($color, $amount)
fade-in($color, $amount) //=> color

• 使用

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

③ 颜色混合

color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%) //=> color

• 使用

@debug color.mix(#036, #d2e1dd); // #698aa2
@debug color.mix(#036, #d2e1dd, 75%); // #355f84
@debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

2、String 字符串函数

p {
  &:after {
    content: quote(内容); // 将内容转换为字符串
  }
  background-color: unquote($string: '#F00'); // 将"#F00"转换为 #F00
  z-index: str-length('12345678'); // 得到内容的长度
}

3、Math 数值函数

p {
  z-index: abs($number: -15); // 15
  z-index: ceil(5.8); // 6
  z-index: max(5, 1, 6, 8, 3); // 8
  opacity: random(); // 随机 0-1
}

4、List 函数

p {
  z-index: lenght(12px); // 1
  z-index: length(12px 5px 8px); // 3

  z-index: index(a b c d, c); // 3
  padding: append(10px 20px, 30px); // 10px 20px 30px
  color: nth($list: red blue green, $n: 2); // blue 🍗
}

5、Map 函数

$font-size: (
  'small': 12px,
  'normal': 18px,
  'large': 24px
);
$padding: (
  top: 10px,
  right: 20px,
  bottom: 10px,
  left: 30px
);

p {
  font-size: map-get($font-size, 'normal');
  @if map-has-key($padding, 'right') {
    padding-right: map-get($padding, 'right');
  }

  &:after {
    content: map-keys($font-size) + ' ' + map-values($padding) + '';
  }
}

结果：

p {
  font-size: 18px;
  padding-right: 20px;
}
p:after {
  content: '"small", "normal", "large" 10px, 20px, 10px, 30px';
}

6、selector 选择器函数

.header {
  background-color: #000;
  content: selector-append('.a', '.b', '.c') + '';
  content: selector-unify('a', '.disabled') + '';
}

结果：

.header {
  background-color: #000;
  content: '.a.b.c';
  content: 'a.disabled';
}

7、自检函数

$color: #f00;
@mixin padding($left: 0, $top: 0, $right: 0, $bottom: 0) {
  padding: $top $right $bottom $left;
}

.container {
  @if variable-exists(color) {
    color: $color;
  } @else {
    content: '$color不存在';
  }
  @if mixin-exists(padding) {
    @include padding($left: 10px, $right: 10px);
  }
}

结果：

.container {
  color: #f00;
  padding: 0 10px 0 10px;
}