指令扩展 ​

@import ​

Sass 扩展了 @import 功能

• 允许导入 sass 或 scss 文件
  • 允许导入多个文件，使用逗号进行分割
  • 被导入的文件将合并编译到同一个 css 文件
  • 被导入的文件中的变量或混合指令可以在导入的文件中使用
  • 分音：即导入 sass 或 scss 文件，但不进行编译
    • 被导入的文件名以下划线开头
    • 导入的文件名去掉下划线
    • 不能同时存在有下划线和无下划线的同名文件，否则有下划线的文件将被忽略
  • 嵌套
    • @import 可以嵌套近 css 样式或 @media 中，使导入的样式仅出现在嵌套层中
    • 不能再混合指令或控制指令中嵌套 @import
• 作为普通的 css 语句
  • 文件扩展名为 .css
  • 文件名以 http:// 开头
  • 文件名以 url() 格式，支持 #{} 插值语句
  • @import 包含媒体查询

缺陷 (dart-sass 在 v1.23+ 版本引入了 @use 和 @forward 以更好地实现模块化)

• 难以确定 变量、函数、混合 的来源
• 嵌套 @import 会导致重复的 css 代码
• 缺少命名空间的概念，导致类名通常冗长
• 缺少私有函数的概念，存在向后兼容问题
• @extend 可能会影响到样式中所有选择器

@use (dart-sass v1.23.0+) ​

@use "bootstrap"                // 会自动生成同名的命名空间(相当于 `@use "bootstrap" as bootstrap`)
@use "module-color" as color    // 使用命名空间(使用时需要指定模块名称)
@use "module-font" as *         // 使用全局空间(可以直接使用)(注意多个全局命名空间需要避免命名重复)
@use "module-size" as size with ($default-size: 100px) // 使用 with 语法覆盖模块变量值

.bg-default
  background-color: color.$default

.font-default
  font-size: $font-default

@use 相比于 @import

• @use 只引入和执行一次
• @use 作用域为引入的模块
• 模块中以 '-' 或 '_' 开头的成员为私有成员, 不会被 @use 引入
• 下游文件的修改不会污染使用了 @extend 的上游文件
• with 语句可以配置模块默认值, 引入多个模块时需要注意引入顺序

@forward (dart-sass v1.23.0+) ​

@forward 可以将引入一个模块的成员并作为当前模块的 API 暴露出去，用于管理组织生成不同的模块，@forward 不会添加命名空间

/* bootstrap.sass */
@forward "functions"
@forward "variables"
@forward "mixins"

// 显示或隐藏指定成员，隐藏的成员相当于模块私有成员(待测试表现)
@forward "functions" show somefn
@forward "functions" hide otherfn

/* bootstrap.sass */
@forward "color" as color-*
@forward "state" as state-*

/* some-module.sass */
@use "bootstrap"
.main-button
  color: $color-red       // 变量添加了前缀

@media ​

Sass 对 @media 进行了功能扩展

• 允许在 css 规则中嵌套，编译时，@media 将被编译到外层，父级选择器将被编译到 @media 内层
• 允许 @media 的 queries 相互嵌套使用，编译时，内层的 @media 将继承外层的条件 (自动添加 and)
• 允许 @media 的 queries 使用变量，插值，函数等 SassScript

示例

$sm: 768px
$md: 992px
$lg: 1200px
$xl: 1600px

.header
    @media screen
        margin: 0 auto
        @media (min-width: $sm)
            width: 720px
        @media (min-width: $lg)
            width: 1280px

编译为

@media screen {
  .header {
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .header {
    width: 720px;
  }
}

@media screen and (min-width: 1200px) {
  .header {
    width: 1280px;
  }
}

@at-root ​

@at-root可以将嵌套中的规则提取至最外层

• 默认 @at-root 只会跳出选择器嵌套
• 使用 @at-root: (width: <keyword>) 或 @at-root (width: <keyword>) 可以跳出 @media 或 @support，支持以下关键字
  • all: 表示所有
  • rule: 表示常规 css
  • media: 表示 media
  • support: 表示 support