SCSS

SCSS（Sassy CSS）是 CSS 的一种扩展语言，是 Sass 的语法之一，支持嵌套规则、变量、混入、继承等特性，可以帮助简化和组织样式代码。

1. 变量

变量可以用来存储值，可以减少重复的 CSS 代码，提高代码的可维护性。

$color-primary: #333;
$color-secondary: #666;

.box {
  color: $color-primary;
  background-color: $color-secondary;
}

2.嵌套规则

允许在选择器中嵌套子选择器：

nav {
  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;

      a {
        text-decoration: none;
      }
    }
  }
}

3.嵌套属性

简化书写常用属性：

button {
  font: {
    size: 14px;
    weight: bold;
  }
  border: {
    width: 1px;
    color: #333;
  }
}

4.父选择器引用（&）

引用父选择器或做修饰：

.button {
  &--primary {
    background-color: blue;
  }

  &:hover {
    background-color: green;
  }
}

5.混入（Mixins）

允许将一系列 CSS 规则合并到一个声明块中，可以减少重复代码，提高代码的可复用性。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(5px);
  background-color: #f5f5f5;
}

6.继承（Extend）

允许一个选择器继承另一个选择器的样式，可以减少重复代码，提高代码的可复用性。

.error {
  border: 1px solid red;
}

.warning {
  @extend .error;
  background-color: yellow;
}

7.运算符

允许在数值中使用运算符，可以简化计算：

$width: 100px;
$height: 50px;

.box {
  width: $width / 2;
  height: $height / 2 + 10px;
}

8.条件语句

允许根据条件（@if 和@else）选择不同的值：

$type: 'primary';
.button {
  @if $type == 'primary' {
    background-color: blue;
  } @else if $type =='secondary' {
    background-color: green;
  } @else {
    background-color: gray;
  }
}

9.循环语句

允许重复执行代码块，可以简化代码：

• @for

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 20px * $i;
  }
}

• @each

$colors: red, green, blue;

.box {
  @each $color in $colors {
    .#{$color} {
      background-color: $color;
    }
  }
}

• @while

$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 20px * $i;
  }
  $i: $i - 2;
}

10. 颜色函数

提供了一些颜色函数，可以方便地生成颜色值：

• lighten($color, $amount)：增加颜色的亮度
• darken($color, $amount)：减少颜色的亮度
• saturate($color, $amount)：增加颜色的饱和度
• desaturate($color, $amount)：减少颜色的饱和度
• grayscale($color)：将颜色转换为灰度
• complement($color)：将颜色的对比度取反
• invert($color)：将颜色反转
• adjust-hue($color, $degrees)：调整颜色的色调
• scale-color($color, $saturation: 100%, $lightness: 100%, $alpha: 1)：调整颜色的饱和度、亮度和透明度
• rgba($color, $alpha)：设置颜色的透明度
• opacify($color, $amount)：增加颜色的透明度
• transparentize($color, $amount)：减少颜色的透明度
• mix($color1, $color2, $weight: 50%)：混合两个颜色
• saturation($color)：获取颜色的饱和度
• lightness($color)：获取颜色的亮度
• alpha($color)：获取颜色的透明度
• color($color)：将颜色转换为 RGB 值

$base-color: #3498db;

.button {
  background-color: lighten($base-color, 10%);
  border-color: darken($base-color, 10%);
}

11.插值（Interpolation）

动态生成 CSS 属性或类名：

$property: color;

.box {
  #{$property}: red;
}

12.导入（@import）

允许在一个样式文件中导入另一个样式文件：

@import "variables";
@import "mixins";
@import "base";

13.模块系统

允许将代码分割成多个文件，并通过 @use 和 @forward 指令来导入和导出模块。

• 使用模块

// _variables.scss
$font-size: 14px;

// main.scss
@use 'variables';

body {
  font-size: variables.$font-size;
}

• 导出模块

// _colors.scss
$primary: blue;

// _index.scss
@forward 'colors';

// main.scss
@use 'index';

body {
  color: index.$primary;
}

14.注释

允许在 Scss 文件中添加注释，以便于阅读和维护：

/* This is a comment */

// This is also a comment

15.输出样式

编译 Scss 文件为 CSS 文件，并输出到指定目录：

输出样式（编译选项）：

• --style：指定输出样式的格式，有 nested（嵌套的），expanded（展开的），compact（紧凑的），compressed（压缩的）四种选择。
• --watch：监视文件变化，自动编译。
• --sourcemap：生成源映射文件，以便于调试。
• --no-source-map-contents：不将源映射文件的内容嵌入到输出文件中。
• --precision：设置浮点数的精度。
• --error-css：将错误输出到单独的 CSS 文件。
• --update：只编译更新过的文件。
• --stop-on-error：在第一个错误出现时停止编译。
• --trace：显示编译过程中的详细信息。
• --load-path：指定 Sass 库的加载路径。
• --[no-]poll：是否使用轮询模式。
• --[no-]cache：是否缓存 Sass 文件。
• --[no-]stdin：是否从标准输入读取 Sass 代码。
• --[no-]interactive：是否使用交互模式。

sass --watch src/style.scss:dist/style.css --style compressed --sourcemap --no-source-map-contents --precision 6