功能扩展

选择器嵌套

.container {
    width: 100vw;
    a {
        width: 10vw;
    }
}

会被编译为

.container {
    width: 100vw;
    a {
        width: 10vw;
    }
}
.container a {
    width: 10vw;
}

父选择器

scss编译器会将选择器里的“&”替换为父选择器字符，简单字符替换

.container {
    width: 100vw;
    &:hover {
        width: 10vw;
    }
​
}

会被编译为

.container {
  width: 100vw;
}
.container:hover {
  width: 10vw;
}

属性嵌套

.container {
    width: 100vw;
    a {
        width: 10vw;
        font: { // 需要注意格式，font: "font冒号空格花括号"
            size:10px;
            weight:bold;
        }
    }
}

会被编译为

.container {
  width: 100vw;
}
.container a {
  width: 10vw;
  font-size: 10px;
  font-weight: bold;
}

占位符

必须以百分号打头

.container-left {
  @extend %public-style;                // 使用方式注意格式，@extend+零个或多个空格+占位符
  width: 50vw;
    
}
.container-right {
  width: 50vw;
  @extend %public-style;
}
%public-style {                         // 需要注意的是：1.占位符如果被定义了但没被使用那么占位符不会被编译。2.占位符定义位置决定了其编译位置
  background-color: white;              
​
}

会被编译为

.container-left {
  width: 50vw;
}
.container-right {
  width: 50vw;
}
.container-left, .container-right {     
  background-color: white;
}

注释

单行注释

.container-left {
  width: 50vw;		// 需要注意的是，单行注释不会被编译
}

会被编译为

.container-left {
  width: 50vw;		
}

多行注释

.container-left {
  width: 50vw;		/* 多行注释 */
}

会被编译为

多行注释会被编译

.container-left {
  width: 50vw;		/* 多行注释 */
}

变量

需要注意的是scss变量是编译阶段的。和原生css变量不一样，在运行中不能修改变量的值进行动态样式切换

$my-colord:red; // 必须以$开始	并且不区分-和_，$my_colord和$my-colord表示同一变量

局部变量

和原生css一样，变量也有作用域

全局变量

1.将变量定义在文件中，不定义在选择器中

2.定义在选择器中的变量通过 !global提升为全局变量

div{
   $my-colord: red !global; 
}

变量值类型

scss提供函数对其进行操作

数字类型（Numbers）

数字类型可以是无单位的数值，如：1、2、3.14；也可以是带单位的数值，如：12px、2em。数字类型可以与其他数字类型进行计算，比如加、减、乘、除等。

（1）calc() 函数：该函数可以用来计算不同单位之间的数值，例如 width: calc(100% - 10px);

（2）percentage() 函数：将数值转换为百分比格式，例如 font-size: percentage(16px / 20px);

（3）min() 和 max() 函数：可以对多个数值进行比较取最小或最大值。

字符串类型（Strings）

字符串类型通常被用来表示文本或者一个特殊的字符串，使用单引号或双引号将其括起来，比如："Hello World" 或者 '中国'。

（1）concat() 函数：用于将两个字符串拼接成一个字符串，例如 content: concat("Hello", "world");

（2）str-length() 函数：返回指定字符串的长度，例如 str-length("hello"); 将返回5。

（3）str-slice() 函数：截取指定位置范围内的字符串, 例如 str-slice("Hello world", 0, 5); 将返回 "Hello"。

（4）unquote($string)：去掉给定字符串的引号并返回。

（5）quote($string)：为给定字符串添加双引号并返回。

颜色类型（Colors）

颜色类型使用颜色关键字或者 RGB、RGBA、HSL、HSLA 等色彩模式来表示，例如 color: red; 或者 background-color: rgba(255, 0, 0, 0.5);

（1）lighten($color, $amount)：将给定颜色变亮，$amount 是一个百分比值，可以设置范围为 0%-100%。

（2）darken($color, $amount)：将给定颜色变暗，$amount 是一个百分比值，可以设置范围为 0%-100%。

（3）saturate($color, $amount)：将给定颜色饱和度增加，$amount 是一个百分比值，可以设置范围为 0%-100%。

（4）desaturate($color, $amount)：将给定颜色饱和度减少，$amount 是一个百分比值，可以设置范围为 0%-100%。

（5）adjust-hue($color, $degrees)：调整给定颜色的色相，$degrees 是一个角度值，可以设置任意角度，正数表示顺时针旋转，负数表示逆时针旋转。

（6）complement($color)：求给定颜色的补色。

（7）rgba($color, $alpha)：将给定颜色转换为 RGBA 表示，其中 $alpha 是透明度值，可以设置范围为 0-1。

（8）mix($color1, $color2, $weight)：混合两个颜色，$weight 是一个权重值，可以设置范围为 0%-100%。

布尔类型（Booleans）

布尔类型只有两个值，true 和 false，在判断语句中非常实用。

（1）bool($value) 函数 该函数返回一个与参数等价的 true 或 false 值。例如：

$width: 0;
.is-large {
  width: bool($width) and $width > 500px; // 返回 false
}

（2）not($value) 函数 该函数返回传递实参$value 的布尔反值。例如：

$has-error: false;
.has-error {
  display: not($has-error); // 返回 true，因为 $has-error 是 false
}

（3）if($condition,$if-true, $if-false) 函数 该函数根据第一个参数$condition 的真假情况，返回其后面的 $if-true 或$if-false。例如：

$is-member: true;
.member-info {
  color: if($is-member, green, red); // 如果 $is-member 为 true，返回 green；否则返回 red
}

空值类型（Null）

空值类型代表没有任何值，如果某些变量没有声明，它们就会被默认赋值为 null.

（1）default($value,$default-value) 函数 该函数用于返回传入的第一个参数 $value，如果$value 是空值（即 null），则返回第二个参数 $default-value，例如：

$font-size: null;
.article {
  font-size: default($font-size, 16px); // $font-size 是 null，则返回默认值 16px
}

列表类型（Lists）

列表类型是由逗号分隔的数值或者字符串组成，使用小括号 () 将其括起来，例如 font-family: ('Helvetica', 'Arial', sans-serif);。

（1）nth() 函数：返回指定位置的值，例如 nth([1, 2, 3], 2); 将返回3。

（2）join() 函数：将两个列表合并成一个，例如 join([1,2],[3,4]) 将返回 [1,2,3,4]。

（3）append() 函数: 将指定的值附加到现有列表的末尾，例如 append([1, 2, 3], 4); 将返回 [1, 2, 3, 4]。

映射类型（Maps）

映射类型是一种键值对的集合，使用小括号 () 表示，例如 $color:(primary：#a993c0，secondary：#f74d84);

（1）map-get($map,$key) 函数该函数用于获取指定键名对应的值，例如：

$colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
);

.btn-primary {
  background-color: map-get($colors, "primary"); // 获取 $colors 映射中键名为 "primary" 的值
}

（2）map-merge($map1,$map2) 函数 该函数将两个映射类型合并成一个新的映射类型，其中后面传递的映射会覆盖前面相同键名的值，例如：

复制代码$btn-padding: (
  "top": 10px,
  "bottom": 10px,
);

$btn-margin: (
  "top": 5px,
  "right": 10px,
);

.btn {
  margin: map-get($btn-margin, "top") map-get($btn-margin, "right");
  padding: map-get($btn-padding, "top") map-get($btn-padding, "bottom");

  // 合并映射类型
  $btn-style: map-merge($btn-padding, $btn-margin);
  font-size: map-get($btn-style, "font-size");
}

（3）map-remove($map,$keys…) 函数 该函数用于删除指定键名的键值对，可以指定多个键名一起删除，例如：

$colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "danger": #dc3545
);

// 删除 $colors 映射中的 "secondary" 和 "danger"
$colors: map-remove($colors, "secondary", "danger"); 

需要注意的是，映射类型虽然看起来很像对象（Object），但实际上是一种不可变类型，即无法直接修改或添加键值对。以上函数实现的修改都是生成了一个新的映射类型，而不是在原有映射类型上进行修改。

文件导入

在scss中，要导入一个文件到另一个文件中可以使用@import指令

@import 'foo';

需要注意的是，在导入文件时，scss会自动检测和处理循环依赖关系。如果在导入过程中出现循环，scss会处理循环依赖，并确保每个文件只被引入一次。

混入（@mixin-@include）

在 SCSS 中，混入（Mixins）是一种可以重用 CSS 属性集的工具。它们类似于函数，可以带参数、使用默认值、包含其他规则等。

要定义一个混入，可以使用 @mixin 指令，后面跟着混入名称和要包含的样式规则。例如：

@mixin border-radius($radius: 5px) {
  border-radius: $radius;
}

以上代码定义了一个名为 border-radius 的混入，它接受一个名为 $radius 的参数，并将其应用到 border-radius 属性中。混入还定义了一个默认值为 5px 的$radius 参数，如果调用时未指定或传递了空值，则会使用该值。

要在 SCSS 中使用混入，请使用 @include 包括混入名称和要传递给其的参数。例如：

.button {
  @include border-radius;
}

// 将使用默认的 radius 值
.box {
  @include border-radius();
}

// 将使用自定义的 radius 值
.card {
  @include border-radius(10px);
}

在上述示例中，.button 类将应用 border-radius 的默认值 5px，.box 类将应用传递了空值的 border-radius（导致使用默认值），而 .card 类将应用传递了值为 10px 的 radius 的 border-radius。

当一个混合被多次调用时，每一次调用都会产生 CSS 规则的副本，而当一个占位符被多个选择器所继承时，只会产生一份 CSS 规则，这样就可以减少 CSS 文件的大小。但是需要注意，如果一个占位符选择器没有被继承，那么它最终将不会产生任何 CSS 规则

变长参数

@mixin border-radius($radius: 5px,$colors...) { // 注意...是写在变量后，不是es的变量前
  border-radius: $radius;
}

继承(@extend)

继承的对象可以是占位符选择器类

.parent-class {
  font-size: 14px;
  color: aqua
}

.son-class {
  @extend .parent-class;
  color: red;
}

编译结果

.parent-class, .son-class {
  font-size: 14px;
  color: aqua;
}
.son-class {
  color: red;
}

通过逗号给子类设置和父类一样的属性，需要注意的是父类的位置决定了.parent-class, .son-class的位置，如果父类的位置在子类后那么生效的是父类

运算符

数学运算符

数学运算符可用于执行基本的加、减、乘和除等数学计算。

以下是 SCSS 中可用的数学运算符：

• 加: +

• 减: -

  在加减法中。如果两个操作数都带单位，会将其单位转为同一单位进行运算。如果只有一方操作数带单位，会对没有单位的操作数加上单位进行运算（50+20%==50%+20%==70%）

  百分号不能和带单位的进行运算，无法进行单位转换

• 乘: *

• 除: /

  • 直接对两个字面量进行除法(10 / 2)是无效的（原样输出当作css属性分隔符）。操作数任意一方是变量或函数返回值、被圆括号包裹、存在多个运算符才会被认为是除法（输出运算结果）。

  在乘除法中。先将操作数的单位剔除，再进行对应操作，最后加上单位（操作不能都带单位，百分号也算单位）

• 取模: %

  运算规则同加减法

比较运算符

比较运算符用于比较两个值之间的大小或相等性，返回一个布尔值(true or false)。

以下是 SCSS 中可用的比较运算符：

• 等于: ==
• 不等于: !=
• 大于: >
• 小于: <
• 大于等于: >=
• 小于等于: <=

逻辑运算符

逻辑运算符用于将多个条件组合成一个条件，并根据结果设置一个条件。

以下是 SCSS 中可用的逻辑运算符：

• 与: &&
• 或: ||
• 非: !

字符串运算符

字符串运算符可用于将两个字符串连接起来。

• 连接: +

  • 输出结果结果是否有双引号，以左边的操作数为准。如果操作数是函数返回值那么无关位置都有双引号

插值语句

#{变量名}，一般用于选择器、属性名、属性值、多行注释。一般用于选择器

通过运算符和插值语句连接的部分字面量会被原样输出

流程控制

分支

@if <expression> {
  // statements for true case
} @else if <expression> {
  // statements for another true case
} @else {
  // statements for false case
}

其中 <expression> 是一个布尔表达式，可以是任意计算结果为布尔值的表达式，如比较、逻辑等。

循环

在 SCSS 中，可以使用 @break 指令来提前结束循环

for

// 定义变量
$box-num: 6;
$box-size: 20px;
$start-color: #f00;

// 循环生成样式规则
@for $i from 1 through $box-num { // through：能取到6	to：只能取到5
  .box:nth-child(#{$i}) {
    width: $box-size * $i;
    height: $box-size * $i;
    background-color: adjust-hue($start-color, $i * 30deg);

    // 为偶数格子应用特殊样式
    @if $i % 2 == 0 {
      border-radius: $box-size / 4;
      transform: rotate(45deg);
    }
  }
}

each

@each $var in <list-or-map> {
  // statements to be executed for each item
}

while

@while <expression> {
  // statements to be executed for each iteration
}

函数

支持可变参数（注意...在变量后）、默认参数、具名参数

// 定义函数
@function lighten($color, $amount) {
  @return mix(#fff, $color, $amount);
}

// 使用函数
body {
  background-color: lighten(#00f, 50%);
}

三元函数

// 定义变量
$bg-color: #fff;
$color: #000;

// 使用 if() 函数设置变量
$content-color: if($bg-color == #fff, $color, #fff);

// 在样式中使用变量
body {
  background-color: $bg-color;
  color: $content-color;
}