Lazy loaded image
编程开发
Sass lang 学习笔记
Words 17925Read Time≈ 45 min
2025-9-28
2025-10-27
date
related_level
slug
sass_notes
type
Post
relate_date
summary
Sass lang 学习笔记
status
Published
tags
编程语言
前端
笔记分享
category
编程开发
last_updated
Oct 27, 2025 09:02 AM
是否已更新
orginal_page
是否推荐
 

Sass 语法

有两种语法：.scss 和 .sass
.scss 是CSS的超集，这意味着所有有效的CSS也是有效的SCSS
.sass 使用缩进而不是大括号来嵌套语句，并使用换行符而不是分号来分隔语句
  • 语法上更接近 Python
  • 缩进语法目前不支持跨多行换行的表达式
  • .scss 较 .sass 更常用
  • Sass 的表达式语法称为 SassScript
解析错误
CSS指定如何从大多数错误中恢复而不是立即失败
  • 这是SCSS严格来说不是CSS超集的少数情况之一
  • 当 Sass 在样式表中遇到无效语法时，解析将失败并向用户显示错误，其中包含有关无效语法位置和无效原因的信息
  • 可以通过特定于实现的 API 访问解析错误的位置
词法
语句 Statements
通用语句
CSS语句
样式规则
  • h1 { /* ... */ }
CSS中的at-rules
  • @media
  • @font-face
@include 使用定义好的 mixin（可复用样式块）
@at-root 将其中的样式放在CSS文档的根部
顶层语句
@use 从其他Sass样式表中加载mixin、函数和变量，并将多个样式表的CSS组合在一起
@import 用于从其他样式表中加载样式、mixin、函数和变量
@forward 用于加载Sass样式表，并在您的样式表使用@use规则加载时提供其混合器、函数和变量。@forward 允许您重新导出其他模块中的成员，以便在使用@use规则加载当前模块时可以使用它们
@mixin 定义可复用的 CSS 样式块
@function 定义可用于SassScript表达式中的自定义函数
其他语句
  • 只能在样式规则和某些CSS at规则中使用的属性声明
    • width: 100px
表达式 Expressions
表达式是位于属性或变量声明右侧的任何内容。每个表达式都会产生一个值
  • 它们作为参数传递给 @mixin 和函数，可以使用 @if 控制流，并使用算术进行运算
  • Sass 的表达式语法称为 SassScript
字面量 Literals
Numbers 数值类型，可能有单位也可能没有单位
Strings 字符串类型，可能加引号也可能未加引号
Colors 颜色类型，可能是颜色关键字也可能是16进制表达式
Lists 列表类型，可以用空格或逗号分隔，可以用方括号括起来，也可以不加括号
  • 1.5em 1em 0 2em
  • Helvetica, Arial, sans-serif
  • [col1-start]
Maps 映射类型，键值对
  • ("background": red, "foreground": pink)
boolean 布尔值类型
  • true
  • false
Sass 中的 true 与 false 值
  • 在允许true或false的任何地方，您也可以使用其他值
    • 值false和null都是false，这意味着Sass认为它们表示false，并导致条件失败
    • 其他任何值都代表 true，这意味着Sass认为它们表示true，并导致条件成功
  • 有些语言认为更多的值是false，而不仅仅是false和null
    • 空字符串、空列表和数字0在 Sass 中都是true
null 空值
运算符 Operations
其他表达式
父选择器 &
变量 $var
  • 被解析为未加引号的字符串的特殊值 !important
  • 函数调用：可以调用SASS Core Library功能或用户定义的功能，或者可以直接汇编为CSS，如 nth($list, 1), var(--main-bg-color)
  • 特殊函数：有特殊解释规则的函数，如 calc(1px + 100%), url(http://myapp.com/assets/logo.png)
注释
SCSS 与 CSS 中类似，// 提供单行注释（又称静默注释），/* */ 提供多行注释（又称 loud 注释）
  • 单行注释不会出现在 CSS 文件中
  • 多行注释写在允许语句的地方将被编译为 CSS 注释。编译为CSS的多行注释可能包含插值，这将在注释被编译之前进行评估
  • 在 compressed mode 下，多行注释会被去除。如果以 /*! 开头则始终包含在 CSS 输出中
SASS 中的单行注释以 // 开头，且缩进在 // 开头的所有内容也会被注释掉
  • 单行注释不会出现在 CSS 文件中
SASS 以 /* */ 注释多行，其中结尾的 */ 是可选的
  • 除此之外的语法与 SCSS 中的多行注释一致
SASS 以 /// 提供文档注释，SassDoc 将注释中的文本解析为 Markdown 文本
  • 可以用来记录库提供的 mixins、函数、变量和占位符选择器，以及库本身
SassDoc 支持许多有用的注释来详细描述
SCSS 示例
SASS 示例
编译后的 CSS
特殊函数
  • CSS定义了许多函数，其中大多数函数与Sass的正常函数语法配合得很好。它们被解析为函数调用，解析为普通的CSS函数，并按原样编译为CSS
  • 一些特殊函数具有特殊的语法，不能仅将其解析为SassScript表达式
    • 所有特殊函数调用都返回未加引号的字符串
url()
  • 语法与其他函数不同，可以使用带引号或不带引号的URL
  • 由于不带引号的URL不是有效的SassScript表达式，因此Sass需要特殊的逻辑来解析它
  • 如果url()的参数是有效的不带引号的URL，则Sass按原样解析它，尽管也可以使用插值来注入SassScript值
  • 如果它不是有效的不带引号的URL，例如，如果它包含变量或函数调用，则将其解析为普通的纯CSS函数调用
element(), progid:...(), expression()
  • element()函数在CSS规范中定义，由于其ID可以解析为颜色，因此需要特殊解析
  • expression()和以progid:开头的函数是旧版Internet Explorer的特性，它们使用非标准语法
    • 尽管最近的浏览器不再支持它们，但Sass仍然为了向后兼容而解析它们
 

Sass 变量

  • 将变量视为存储要在整个样式表中重用的信息的一种方式
  • 变量名以 $ 开头，以 <variable>: <expression> 的形式声明变量
Sass 变量与 CSS 变量的区别
  • Sass变量都是由Sass编译掉的；CSS变量包含在CSS输出中
  • Sass变量是命令式的，这意味着如果你使用一个变量，然后改变它的值，之前的使用将保持不变；CSS变量是声明性的，这意味着如果您更改值，它将影响以前的使用和以后的使用
Scss 示例
CSS 示例
变量默认值 default values
  • 如果您正在编写Sass库，您可能希望允许用户在使用库的变量生成CSS之前对其进行配置
  • 使用 !default 标识来为变量分配默认值，仅当变量未定义或值为 null 时生效
当使用@use规则加载模块时，可以配置带有 !default 标识的变量默认值
  • 配置的值将覆盖变量的默认值，只能配置定义在顶层作用域带有 !default 标识的变量
  • @use <url> with (<variable>: <value>, <variable>: <value>)
Scss 示例
CSS 示例
内置变量 built-in variables
  • 由内置模块定义的内置变量不能被修改
Scss 示例
变量作用域 scope
定义在样式表顶层的变量是全局（global）变量；对应地，定义在代码块（block）内的变量是局部（local）变量
  • 在对应模块的任意位置都可以访问全局变量
  • 局部变量仅能在对应代码块中访问
如果需要在代码块内部设置全局变量的值可以用 !global 关键字
  • !global 关键字只能用于在顶级作用域中声明过的变量
Scss 示例
遮蔽（Shadow）
  • 局部变量甚至可以用与全局变量相同的名称声明
  • 如果发生这种情况，实际上有两个不同的变量具有相同的名称：一个局部变量和一个全局变量
  • 这有助于确保编写局部变量的作者不会意外更改他们甚至不知道的全局变量的值
Scss 示例
CSS 示例
控制流作用域（Flow Control Scope）
  • 声明在控制流作用域中的变量不会在与控制流规则相同的级别上遮蔽变量，而是把值分配给这些变量
  • 流控制范围内的变量可以分配给外部范围内的现有变量，但流控制范围中声明的新变量在外部范围内不可访问
    • 确保变量在赋值之前已经声明，即使需要将其声明为null
Scss 示例
CSS 示例
高级变量函数
#{} 插值 interpolation
将表达式放入 #{} 实现插值
  • 在大多数情况下，插值注入的文本与将表达式用作属性值时使用的文本完全相同
  • 但有一个例外：带引号的字符串周围的引号会被删除（即使那些带引号的字符串在列表中）
  • 这使得可以编写包含SassScript中不允许的语法的带引号字符串（如选择器），并将它们插入到样式规则中
Scss 示例
CSS 示例
  • 插值可以在SassScript中使用，将SassScript注入到未加引号的字符串中
    • 这在动态生成名称（例如动画）或使用斜线分隔的值时特别有用
    • 请注意，SassScript中的插值总是返回一个未加引号的字符串
      • 这使得当引用的字符串来自Sass变量时，很难将其用作自定义属性的值
      • 作为一种变通方法，您可以使用meta.inspect()函数来保留引号
  • 对数字使用插值几乎总是一个坏主意。插值返回无法用于任何进一步计算的未加引号的字符串，并且它避免了Sass的内置保护措施，以确保正确使用单位
Scss 示例
CSS 示例
 

Sass 样式规则

  • 可以选择使用选择器设置哪些元素的样式，并声明影响这些元素外观的属性
嵌套 nest
  • SASS将自动将外部规则的选择器与内部规则相结合
    • 可以在另一种样式中编写一个样式规则
  • 嵌套规则非常有用，但它们也会使您很难可视化实际生成的CSS数量
    • 嵌套得越深，为CSS提供服务所需的带宽就越多，浏览器渲染CSS所需的工作也就越多
    • 保持足够浅的选择器深度
用逗号分割的选择器列表
  • 对每个选择器循环嵌套
Scss 示例
CSS 示例
使用选择器嵌套运算符
  • 可以将嵌套运算符放在外部选择器的末尾，内部选择器的开头，甚至可以单独放在两者之间
Scss 示例
CSS 示例
可以使用插值将变量和函数调用等表达式中的值注入到选择器中
  • 这在编写mixin时特别有用，因为它允许您根据用户传入的参数创建选择器
Scss 示例
CSS 示例
属性声明 Property Declaration
  • 属性声明定义了与选择器匹配的元素的样式
  • 声明的值可以是任何SassScript表达式，它将被计算并包含在结果中
属性的名称可以包含插值，从而可以根据需要动态生成属性
Scss 示例
CSS 示例
嵌套属性声明
  • 许多CSS属性都以相同的前缀开头，充当一种名称空间
  • 外部属性名称添加到内部属性名称中，由连字符分隔
Scss 示例
CSS 示例
折叠声明 hidden declarations
  • 如果声明的值为null或空的无引号字符串，Sass根本不会将该声明编译为CSS
Scss 示例
CSS 示例
CSS 自定义属性 Custom Properties
  • CSS 自定义属性（也称为 CSS 变量）在声明值中几乎允许任何文本
    • 更重要的是，JavaScript可以访问这些值，因此任何值都可能与用户相关。这包括通常将其作为SassScript解析的值
  • 正因为如此，Sass解析自定义属性声明的方式与其他属性声明不同。所有token，包括那些看起来像SassScript的token，都按原样传递给CSS
  • 唯一的例外是插值，这是将动态值注入自定义特性的唯一方法
Scss 示例
CSS 示例
& 父选择器 Parent Selector
父选择器 & 是Sass发明的一种特殊选择器，用于嵌套选择器，以引用外部选择器
  • 可以以更复杂的方式重用外部选择器，比如添加一个伪类或在父类之前添加一个选择器
Scss 示例
CSS 示例
  • 因为父选择器可以被像 h1 这样的类型选择器替换，所以它只被允许使用在允许使用类型选择器的复合选择器的开头，如 span& 是不被允许的
可以使用父选择器为外部选择器添加额外的后缀
  • 当使用像BEM这样使用高度结构化类名的方法时，这一点尤其有用
  • 只要外部选择器以字母数字名称结尾（如类、ID和元素选择器），就可以使用父选择器附加其他文本
Scss 示例
CSS 示例
在 SassScript 中使用父选择器
一个特殊的表达式，它使用与选择器函数相同的格式返回当前父选择器
  • 返回值为一个逗号分隔的选择器列表，其中包含空格分隔的复杂选择器列表（如.main aside:hover），其中又包含未加引号的字符串（组合选择器，如aside:hover）
Scss 示例
CSS 示例
如果在任意样式规则之外使用父选择器表达式，将会返回 null
  • 由于null是false，这意味着您可以很容易地使用它来确定mixin是否在样式规则中被调用
Scss 示例
CSS 示例
样式规则进阶嵌套
  • 与选择器函数及 @at-root 规则一起使用
  • 假设您想要编写一个与外部选择器和元素选择器相匹配的选择器，您可以编写一个类似于这样的mixin，它使用 selector.unify() 函数将父选择器与用户的选择器组合在一起
  • @at-root 在这里是必要的，因为Sass不知道在执行选择器嵌套时使用了什么插值来生成选择器。这意味着即使您使用 & 作为SassScript表达式，它也会自动将外部选择器添加到内部选择器。@at-root 明确地告诉Sass不要包含外部选择器
Scss 示例
CSS 示例
以 % 开头的占位符选择器 Placeholder Selectors
  • 以 % 开头，看起来与选择器类似，并具有相似的操作
与 @extend <selector> 结合使用
  • @extend 告诉 Sass 一个选择器应该继承另一个选择器的样式
Scss 示例
CSS 示例
没有被拓展的占位符不会出现在 CSS 中，它们不会打乱CSS，也不会强制用户为HTML使用特定的类名
Scss 示例
CSS 示例
占位符选择器可以与其他模块成员一样，通过以 - 或 _ 来标识为私有
  • 私有占位符选择器只能在定义它的样式表中进行扩展
  • 对于任何其他样式表，该选择器看起来都不存在
 

Sass 中的@规则 at-rules

@use 从其他Sass样式表中加载mixin、函数和变量，并将多个样式表的CSS组合在一起
  • @use加载的样式表称为模块 module
语法：@use "<url>"
  • 与 CSS 原生 url() 函数不同，必须有引号
加载模块成员
  • 可以通过编写 <namespace>.<variable>, <namespace>.<function>() 或 @include <namespace>.<mixin>() 来访问另一个模块中的变量、函数和 mixin
      • Scss 示例
      CSS 示例
使用 @use 加载的成员（变量、函数和 mixin）仅在加载它们的样式表中可见
  • 其他样式表需要编写自己的 @use 规则，如果它们也想访问它们
  • 如果您想一次从多个文件加载成员，可以使用 @forward 规则从一个共享文件中转发它们
默认情况下，模块的命名空间只是其 URL 的最后一个组件，不带文件扩展名
  • 可以通过编写 @use "<url>" as <namespace> 来选择命名空间
  • 甚至可以通过将 @use "<url>" as * 来加载没有命名空间的模块
    • 可能会引入新成员，从而导致名称冲突！
Scss 示例
CSS 示例
私有成员 Private members
  • 私有成员的名称以 - 或 _ 开头
  • 这些成员将在定义它们的样式表中正常工作，但它们不会成为模块公共API的一部分。这意味着加载模块的样式表看不到它们
Scss 示例
配置变量值
  • 模块可以使用 !default 标志定义可配置的变量
要加载带有配置的模块，请编写 @use <url> with (<variable>: <value>, <variable>: <value>)，配置值将覆盖变量原有的默认值
Scss 示例
CSS 示例
如果想一次配置许多变量，可以传递映射作为配置，或在加载模块后更新配置
  • 考虑编写一个 mixin 来设置您的变量，然后编写另一个 mixin 来注入您的样式
Scss 示例
CSS 示例
变量重分配 reassigning variables
  • 加载模块后可以对模块内变量的值重新赋值
    • 对模块内的值赋值会覆盖掉对应模块中的值
  • 内置函数的变量无法重分配
Scss 示例
模块嗅探
Sass 通过 URL 加载文件，而不是通过文件路径
  • 确保样式表在每个操作系统上都能正常工作
  • 这意味着您需要使用正斜杠/，而不是反斜杠\，即使在 Windows 上也是如此
不必显式地写出要加载的文件的扩展名
  • @use "variables" 将自动加载 variables.scss、variables.sass 或 variables.css
所有 Sass 实现都允许用户提供加载路径（load paths）
  • 加载路径为 Sass 在定位模块时将在文件系统上查找的路径
  • 如果您将 node_modules/susy/sass 作为加载路径传递，则可以使用 @use "susy" 来加载 node_modules/susy/sass/susy.scss
  • 模块总是首先相对于当前文件加载。只有当不存在与模块 URL 匹配的相对文件时，才会使用加载路径（load paths）
局部文件 _filename.scss, _filename.sass
  • 以 _ 开头，仅用作模块加载而不是单独编译的 Sass 文件（如 _code.scss）
  • 导入局部文件时可以省略 _
索引文件 _index.scss, _index.sass
  • 如果您在文件夹中写了一个 _index.scss 或 _index.sass，则当您加载该文件夹本身的 URL 时，索引文件将自动加载
加载 CSS 文件
  • 除了加载 .sass 或 .scss 文件外，还可以加载 CSS 文件
  • 作为模块加载的CSS文件不允许任何特殊的Sass功能，因此不能公开任何Sass变量、函数或混合。为了确保作者不会意外地在他们的CSS中写入Sass，所有不是有效CSS的Sass功能都会产生错误。否则，CSS将按原样呈现。
Scss 示例
CSS 示例
@use规则旨在取代旧的@import规则，但它被有意设计为以不同的方式工作
@use仅使变量、函数和mixin在当前文件的范围内可用
  • 它从未将它们添加到全局范围
  • 这样可以很容易地找出Sass文件引用的每个名称的来源，这意味着您可以使用较短的名称，而不会有任何冲突的风险
@use只加载每个文件一次
  • 这样可以确保您不会意外地多次复制依赖项的CSS
  • @use必须出现在文件的开头，并且不能嵌套在样式规则中
  • 每个@use规则只能有一个URL
  • @use需要在其URL周围加引号，即使使用缩进的语法也是如此
@forward 加载Sass样式表，并在您的样式表使用@use规则加载时提供其mixin、函数和变量
语法：@forward "<url>"
  • 与 CSS 原生 url() 函数不同，必须有引号
像 @use 一样加载给定 URL 的模块，但它使加载模块的公共成员可供您的模块的用户使用，就像它们直接在您的模块中定义一样。但如果想要在模块中使用这些成员还需要编写 @use 规则
  • 如果您在同一个文件中为同一个模块同时编写了 @forward 和 @use，那么最好先写 @forward。这样，如果您的用户想配置转发的模块，那么在您的 @use 加载它之前，该配置将应用于 @forward
  • 对于模块的 CSS 来说，@forward 规则与 @use 的作用相同。来自转发模块的样式将包含在编译后的 CSS 输出中，并且可以使用 @extend 扩展带有 @forward 的模块，即使它没有被 @used
Scss 示例
CSS 示例
添加前缀
  • 语法：@forward "<url>" as <prefix>-*，
  • 将给定的前缀添加到模块转发的每个 mixin、函数和变量名称的开头
    • 如果模块定义了一个名为 reset 的成员，并且它被转发为 list-*，则下游样式表将将其称为 list-reset
Scss 示例
CSS 示例
控制可见性
可以通过编写 @forward "<url>" hide <members...> 或 @forward "<url>" show <members...> 来精确控制哪些成员被转发
  • hide 表单意味着列出的成员不应被转发，但其他所有内容都应该被转发
  • show 表单意味着只有命名的成员应该被转发
  • 在两种表单中均可以列出 mixin、函数或变量（包括 $）的名称
Scss 示例
配置模块
  • @forward规则可以加载带有配置的模块
  • 与@use的工作原理基本相同，除了 @forward规则的配置可以使用 !default 标志
    • 这允许模块更改上游样式表的默认值，同时仍然允许下游样式表覆盖它们
Scss 示例
CSS 示例
@import 用于从其他样式表中加载样式、mixin、函数和变量
@import 规则有许多严重的问题
  • @import 使所有变量、mixin 和函数都可以全局访问。这使得人们（或工具）很难确定任何东西的定义位置。
  • 因为一切都是全局的，库必须为它们的所有成员添加前缀以避免命名冲突。
  • @extend 规则也是全局的，这使得很难预测哪些样式规则将被扩展。
  • 每次 @import 一个样式表时，它都会被执行并发出其 CSS，这增加了编译时间并产生了臃肿的输出。
  • 没有办法定义私有成员或占位符选择器，使其对下游样式表不可访问。
  • 新的模块系统和 @use 规则解决了所有这些问题
不再鼓励使用，请尽快迁移
@mixin, @include 复用 CSS 样式块
定义 mixin
  • 语法
    • @mixin <name> {...}
    • @mixin name(<arguments...>) {...}
  • 其中 name 是 Mixin 的名称，可以是任何有效的 Sass 标识符
  • <arguments...> 是 Mixin 的参数列表
  • 在 mixin 中，可以包含任何语句，除了顶层语句
引用 mixin
  • 使用@include @规则将mixin包括在当前上下文中
  • 语法
    • @include <name>
    • @include name(<arguments...>)
  • 其中 name 是 Mixin 的名称
使用 mixin 可以将一组样式封装为一个整体，可以将 Mixin 嵌套到其他样式规则中，也可以将它们作为顶层规则使用，或者仅用于修改变量
Scss 示例
CSS 示例
mixin 参数
  • 在 @mixin 规则中，参数是指在 mixin 名称后加上一对括号，包含了一组参数名，多个参数名之间用逗号隔开
可选参数 optional arguments
  • 可以通过定义默认值，为参数提供一些更灵活的选择。
  • 定义默认值可以使用与变量声明相同的语法。在参数列表中，使用冒号（:）分隔参数名称和默认值表达式
Scss 示例
CSS 示例
关键字参数 keyword arguments
关键字参数允许在调用 Mixin 时，通过指定参数名称和值的方式，在不特定参数顺序的情况下精确地向 Mixin 传递参数
  • 因为任何参数都可以通过名称传递，所以在重命名mixin的参数时要小心……这可能会影响用户！将旧名称作为可选参数保留一段时间，并在有人传递时打印警告，这样他们就知道要迁移到新参数，这会很有帮助。
Scss 示例
CSS 示例
接受任意参数
  • 如果@mixin声明中的最后一个参数以…结尾，则该函数的所有额外参数都作为列表传递给该参数。该参数称为参数列表
Scss 示例
CSS 示例
接受任意关键字参数
  • meta.keywords() 函数接受一个参数列表，并返回传递给该函数的任何额外关键字，以一个从参数名称（不包括$）到这些参数值的映射形式
Scss 示例
CSS 示例
传递任意参数
  • 同样的语法（参数以…结尾）也可以用于将任意位置和关键字参数传递给 mixin
  • 如果传递一个以…结尾的列表，其中的元素将被视为额外的位置参数；如果传递一个以…结尾的映射，其中的元素将被视为额外的关键字参数
    • 可以同时传递这两项
Scss 示例
内容块 content blocks
  • 除了接受参数外，mixin还可以接受整个样式块，即内容块
  • mixin可以通过在其主体中包含 @content 规则来声明它接受一个内容块。像Sass中的任何其他块一样，内容块是使用大括号传入的，并且它被注入到 @content 规则的位置
Scss 示例
CSS 示例
传递参数给内容块
内容块在词法作用域中是有限制的，这意味着它们只能访问在 mixin 被包含的作用域内的局部变量
  • 内容块可以继承在 mixin 外部定义的变量并将其作为参数传递给 mixin
  • 然而，内容块无法访问 mixin 内部定义的任何变量，即使是在内容块被调用之前也是如此。这是因为内容块无法识别定义在 mixin 作用域内的任何变量
要解决这个限制，你可以将在内容块中使用的变量作为 mixin 的参数进行定义，并将它们通过参数传递到内容块中
  • 如果mixin要将参数传递给其内容块，则该内容块必须声明它接受这些参数
  • 这意味着只按位置（而不是按名称）传递参数是个好主意，这意味着传递更多的参数是一个重大变化
  • 如果你想灵活地将信息传递给内容块，可以考虑向它传递一个包含它可能需要的信息的映射
语法
在 @mixin 中定义要传递的参数并传递其中内容块所需的参数至 @content
  • @include <name> using (<arguments...>)
Scss 示例
CSS 示例
mixin 缩进语法
  • sass 中的缩进语法有一种特殊的写法来定义并使用 @mixin
    • 尽管这种语法很简洁，但也很难一眼就能理解，因此鼓励用户避免使用
  • 使用 = 字符定义 mixins 并使用 + 字符来引用
Sass 示例
CSS 示例
@function 定义可用于SassScript表达式中的自定义函数
语法：@function <name>(<arguments...>) { ... }
  • 函数名可以是任意 Sass 标识符
  • 只能包含词法中的通用语句 universal statements 以及 @return 规则
  • 使用普通的CSS函数语法进行调用
  • 虽然从技术上讲，函数可能会产生副作用，比如设置全局变量，但强烈反对这样做。使用mixin来产生副作用，使用函数来计算值
参数 arguments
可选参数 optional arguments
  • 通常，函数声明的每个参数都必须在包含该函数时传递。但是，您可以通过定义一个默认值来使参数成为可选参数，如果该参数未被传递，则将使用该默认值
  • 默认值使用与变量声明相同的语法：变量名后跟冒号（:）和SassScript表达式
Scss 示例
CSS 示例
关键字参数 keyword arguments
  • 调用函数时，除了按参数在参数列表中的位置传递参数外，还可以按名称传递参数。这对于具有多个可选参数的函数，或者具有布尔参数的函数尤其有用，这些函数的含义在没有名称的情况下并不明显
Scss 示例
CSS 示例
接受任意参数
  • 如果@function声明中的最后一个参数以…结尾，则该函数的所有额外参数都作为列表传递给该参数。该参数称为参数列表
Scss 示例
CSS 示例
接受任意关键字参数
  • meta.keywords() 函数接受一个参数列表，并返回传递给该函数的任何额外关键字，以一个从参数名称（不包括$）到这些参数值的映射形式
传递任意参数
  • 同样的语法（参数以…结尾）也可以用于将任意位置和关键字参数传递给函数
  • 如果传递一个以…结尾的列表，其中的元素将被视为额外的位置参数；如果传递一个以…结尾的映射，其中的元素将被视为额外的关键字参数
    • 可以同时传递这两项
Scss 示例
CSS 示例
返回值与 @return 规则
  • @return 规则指示要用作调用函数结果的值
    • 只允许在 @function 内部使用，并且每个@function 都必须以 @return 结束
    • 当遇到@return时，它会立即结束函数并返回结果
Scss 示例
@extend 允许选择器相互继承样式
选择 @extend 还是 @mixin
  • @extend 允许您从另一个选择器继承样式，而 @mixin 允许您定义一组可以在多个地方包含的样式
  • 作为经验法则，当表达语义类之间的关系时，最好使用 @extend；而对于非语义样式集合，编写一个 mixin 可以避免级联头痛（cascade headaches）并使其更容易配置
当一个类扩展另一个类时，Sass会将所有与扩展器匹配的元素样式化，就好像它们也匹配被扩展的类一样。当一个类选择器扩展另一个类选择器时，它的工作方式就像您在HTML中已经具有扩展类的每个元素中添加了被扩展类一样
Scss 示例
CSS 示例
扩展将在编译完样式表的其余部分后解析。特别是，它发生在解析父选择器之后
  • 这意味着，如果 @extend .error，它不会影响 .error { &__icon { ... } } 中的内部选择器。这也意味着SassScript中的父选择器无法看到扩展的结果
  • 由于@extend更新包含扩展选择器的样式规则，因此它们的样式在层叠（cascade）中的优先级取决于被扩展选择器所在的样式规则的出现位置，而不是@extend的出现位置
强制性扩展与可选性扩展
  • 要求扩展选择器存在的扩展是强制性的
    • 通常，如果@extend与样式表中的任何选择器都不匹配，Sass将产生一个错误。这有助于防止输入错误或在不重命名从选择器继承的选择器的情况下重命名选择器
  • 这可能不是你期望的行为，通过在结尾添加 !optional 标识可以让扩展器在未匹配的情况下跳过
以 % 开头的占位符选择器 Placeholder Selectors
  • 以 % 开头，看起来与选择器类似，并具有相似的操作
与 @extend <selector> 结合使用
  • @extend 告诉 Sass 一个选择器应该继承另一个选择器的样式
Scss 示例
CSS 示例
没有被拓展的占位符不会出现在 CSS 中，它们不会打乱CSS，也不会强制用户为HTML使用特定的类名
Scss 示例
CSS 示例
占位符选择器可以与其他模块成员一样，通过以 - 或 _ 来标识为私有
  • 私有占位符选择器只能在定义它的样式表中进行扩展
  • 对于任何其他样式表，该选择器看起来都不存在
@extend 工作过程
  • 与 mixin 不同，mixin 将样式复制到当前样式规则中，@extend 更新包含扩展选择器的样式规则，以便它们也包含扩展选择器
当扩展选择器时，Sass会进行智能统一
  • 它永远不会生成像 #main#footer 这样不可能匹配任何元素的选择器。
  • 它确保复杂的选择器交错，以便无论HTML元素嵌套的顺序如何都能正常工作
  • 它尽可能修剪冗余选择器，同时仍然确保特异性大于或等于扩展器的特异性
  • 它知道一个选择器何时匹配另一个选择器的所有内容，并可以将它们组合在一起
  • 它智能地处理组合器、通用选择器和包含选择器的伪类
Scss 示例
CSS 示例
@extend 作用域
  • 当一个样式表扩展一个选择器时，该扩展只会影响上游模块中编写的样式规则，也就是说，该样式表使用@use规则或@forward规则加载的模块，这些模块加载的模块等等
  • 如果使用的是@import规则，则扩展根本不受作用域限制
    • 它们不仅会影响你导入的每一个样式表，还会影响导入你的样式表的每个样式表，以及这些样式表导入的所有其他内容，等等
@extend 使用限制
只有简单选择器（如 .info 或 a 这样的独立选择器）能被扩展
  • 如果.message info可以扩展，那么根据 @extend 的定义 ，与扩展程序匹配的元素将被设置为与.message.info匹配。这与匹配.message和.info是一样的，所以用它来代替@extend .message, .info没有任何好处
  • 类似地，如果 .main .info 可以扩展，这与扩展 .info 本身几乎没有区别
Scss 示例
启发式 HTML
  • 当@extend交错复合选择器（参照工作过程的 .guide .info 示例）时，它不会生成祖先选择器的所有可能组合。它可以生成的许多选择器实际上不太可能与真正的HTML匹配，并且生成它们都会使样式表太大，而实际值很小
  • 相反，它使用了一种启发式方法：它假设每个选择器的祖先都是自包含的，而不会与任何其他选择器的祖先交错
Scss 示例
CSS 示例
在 @media 中使用
  • 虽然@media和其他CSS @规则中允许使用@extend，但不允许出现在@规则之外的选择器
  • 这是因为扩展选择器只适用于给定的媒体上下文，并且无法确保在不复制整个样式规则的情况下在生成的选择器中保留限制
Scss 示例
@at-root 将其中的样式规则放在CSS文档的根部
  • 常用于使用SassScript父选择器和选择器函数进行高级嵌套
语法
  • @at-root <selector> { ... }
    • 相当于 @at-root { <selector> { ... } }! 的缩写
  • @at-root { ... }
样式规则进阶嵌套
  • 与选择器函数及 @at-root 规则一起使用
  • 假设您想要编写一个与外部选择器和元素选择器相匹配的选择器，您可以编写一个类似于这样的mixin，它使用 selector.unify() 函数将父选择器与用户的选择器组合在一起
  • @at-root 在这里是必要的，因为Sass不知道在执行选择器嵌套时使用了什么插值来生成选择器。这意味着即使您使用 & 作为SassScript表达式，它也会自动将外部选择器添加到内部选择器。@at-root 明确地告诉Sass不要包含外部选择器
Scss 示例
CSS 示例
在样式规则之外使用
  • 就 @at-root 本身而言只能处理样式规则，像 @media 或 @support 这样的@规则是无法处理的
  • 可以通过像媒体特征查询一样来排除或包含特定规则
语法
  • @at-root (without: <rules...>) { ... } 告诉Sass应该排除哪些规则
  • @at-root (with: <rules...>) { ... } 告诉Sass应该包含哪些规则
Scss 示例
CSS 示例
查询中可用的两个特殊值 rule, all
  • rule指的是样式规则
    • 例如，@at-root (with: rule) 排除了所有@规则，但保留了样式规则
  • all指的是所有@规则和样式规则
异常处理
@error 导致编译失败并显示错误消息
  • 在编写使用参数的 mixin 和函数时，通常需要确保这些参数具有API所期望的类型和格式。如果没有，则需要通知用户，并且您的mixin/函数需要停止运行
语法：@error <expression>
  • 打印表达式的值（通常是一个字符串）以及指示当前mixin或函数是如何调用的堆栈跟踪
Scss 示例
  • 没有 CSS 实例，因为解析异常而立即失败
终端输出
@warn 打印警告，但不完全停止编译
  • 在编写mixin和函数时，您可能希望阻止用户传递某些参数或某些值。他们可能正在传递现在被弃用的遗留参数，或者他们可能正在以一种不太理想的方式调用您的API。
语法：@warn <expression>
  • 打印表达式的值（通常是一个字符串）以及指示当前mixin或函数是如何调用的堆栈跟踪
Scss 示例
CSS 示例
终端输出
@debug 打印调试消息
  • 在开发样式表时，可以看到变量或表达式的值很有用
语法：@debug <expression>
  • 打印该表达式的值，以及所在的文件名和行号
Scss 示例
终端输出
控制流
@if, @else 条件
  • 选择执行代码块
语法：@if <expression> { ... }
  • 如果表达式 <expression> 返回 true 则执行代码块，返回 false 则跳过
Scss 示例
CSS 示例
语法：@else { ... }
  • 在 @if 后使用，返回 false 时执行 else 部分的代码块
Scss 示例
CSS 示例
语法：@else if <expression> { ... }
  • 在 @if 后使用，如果表达式 <expression> 返回 true 则执行代码块，返回 false 则跳过
Scss 示例
CSS 示例
Sass 中的 true 与 false 值
  • 在允许true或false的任何地方，您也可以使用其他值
    • 值false和null都是false，这意味着Sass认为它们表示false，并导致条件失败
    • 其他任何值都代表 true，这意味着Sass认为它们表示true，并导致条件成功
  • 有些语言认为更多的值是false，而不仅仅是false和null
    • 空字符串、空列表和数字0在 Sass 中都是true
@for 循环
  • 从一个数字（第一个 <expression> 的结果）向上或向下计数到另一个数字（第二个 <expression> 的结果），并为其间的每个数字执行一个块
  • 语法：@for <variable> from <expression> to <expression> { ... }
语法：@for <variable> from <expression> through <expression> { ... }
  • 执行期间，每个数字都被分配给给定的变量名 <variable>
  • 使用 to 时不包含最后一个数字；使用 through 时包含最后一个数字
Scss 示例
CSS 示例
@while 循环
  • 当表达式返回结果为 true 时执行代码块，直到表达式 返回 false
语法：@while <expression> { ... }
  • 尽管@while对于一些特别复杂的样式表是必要的，但如果 @each 或 @for 也能实现则应该使用 @each 或 @for ，它们对读者来说更清晰，而且编译起来通常也更快
Scss 示例
CSS 示例
Sass 中的 true 与 false 值
  • 在允许true或false的任何地方，您也可以使用其他值
    • 值false和null都是false，这意味着Sass认为它们表示false，并导致条件失败
    • 其他任何值都代表 true，这意味着Sass认为它们表示true，并导致条件成功
  • 有些语言认为更多的值是false，而不仅仅是false和null
    • 空字符串、空列表和数字0在 Sass 中都是true
@each 遍历
  • 为列表中的每个元素或映射中的每个键值对提供样式或计算代码
语法：@each <variable> in <expression> { ... }
  • 表达式 <expression> 返回一个列表，依次为列表中的每个元素执行块，列表中这些元素被分配给给定的变量名 <variable>
Scss 示例
CSS 示例
语法：@each <variable>, <variable> in <expression> { ... }
  • 表达式 <expression> 依次返回一个键值对，为每个键值对执行块，键值对中键被分配给第一个变量 <variable>， 值被分配给第二个变量 <variable>
Scss 示例
CSS 示例
语法：@each <variable...> in <expression> { ... }
  • 如果您有一个列表的列表，您可以使用@each将变量自动分配给内部列表中的每个值
  • 每个变量名都被分配给列表中相应位置的值，如果列表中没有足够的值，则值为null
Scss 示例
CSS 示例
原生 CSS @规则
  • Sass 支持 CSS 中所有的@规则
CSS @规则语法
  • @<name> <value>
  • @<name> { ... }
  • @<name> <value> { ... }
  • 其中 <name> 是一个标识符，<value>（如果存在的话）几乎可以是任何东西
    • 两者都可以包含插值
Scss 示例
CSS 示例
如果 CSS @规则嵌套在一个样式规则中，则会自动交换位置，使得@规则处于顶层且样式规则也在其中
Scss 示例
CSS 示例
特殊语法
除常规规则外，@media 特征查询中支持 SassScript 表达式
Scss 示例
CSS 示例
Sass还会尽可能合并彼此嵌套的媒体查询，以便更容易地支持尚未原生支持嵌套@media规则的浏览器
Scss 示例
CSS 示例
除常规规则外，@supports 声明查询中支持 SassScript 表达式
Scss 示例
CSS 示例
@keyframes 其子规则必须是有效的关键帧规则（<number>%、from或to），而不是普通选择器
Scss 示例
CSS 示例
 

Sass 内置模块

所有内置的模块URL都以sass:开头表明它们是sass本身的一部分
  • Sass提供了许多内置模块，其中包含有用的功能（以及部分mixin功能）
  • 内置模块可以像任何用户定义的样式表一样使用@use规则加载，并且可以像任何其他模块成员一样调用它们的函数
全局函数
在引入Sass模块系统之前，所有Sass功能都在全局范围内随时可用，许多函数仍然有全局别名（这些别名在它们的文档中列出）
  • Sass团队不鼓励使用它们，最终会弃用它们，但目前它们仍然可以与旧的Sass版本和LibSass兼容（LibSass还不支持模块系统）
一些函数即使在新的模块系统中也只能全局使用，这些不会被弃用，可以自由使用
  • 如 if() 函数具有特殊的求值行为
  • 如 rgb()和hsl()在内置的CSS函数之上添加了额外的行为
if()
  • if($condition, $if-true, $if-false)
  • 返回 $if-true 如果 $condition 为 true，否则返回 $if-false
  • 这个函数的特殊之处在于，它甚至不计算未返回的参数，因此即使未使用的参数会引发错误，也可以安全地调用
Scss 示例
rgb(), rgba()
语法
  • Sass针对斜杠分隔值的特殊解析规则使得在使用 rgb($red $green $blue/ $alpha) 时很难传递$blue或$alpha的变量。考虑使用 rgb($red, $green, $blue, $alpha) 进行替代
如果传递了 $red, $green, $blue, $alpha 参数则返回对应的 color 值
  • 每个通道可以指定为0到255（包括255）之间的无单位数，也可以指定为0%到100%（包括0%）之间的百分比
  • alpha通道可以指定为0和1（包括0和1）之间的无单位数，也可以指定为0%和100%（包括0%和100%）之间的百分比
Scss 示例
hsl(), hsla()
语法
  • Sass针对斜杠分隔值的特殊解析规则使得在使用 hsl($hue $saturation $lightness / $alpha) 时很难传递$lightness或$alpha的变量。考虑使用 hsl($hue, $saturation, $lightness, $alpha) 进行替代
如果传递了 $hue, $saturation, $lightness, $alpha 参数则返回对应的 color 值
  • 色相 hue 是0级和360度（包含在内）之间的数字，并且可能是无单位的
  • 饱和度 saturation 和亮度lightness 在0％至100％之间（包括在内），可能不是无单位的
  • alpha通道可以指定为0和1（包括0和1）之间的无单位数，也可以指定为0%和100%（包括0%和100%）之间的百分比
Scss 示例
sass:math 提供了数学常数和对数字进行操作的函数
数学常数
  • math.$pi
  • math.$e
  • math.$epsilon
  • math.$max-number
  • math.$max-safe-integer
  • math.$min-number
  • math.$min-safe-integer
边界函数
  • math.clamp($min, $number, $max) //=> number
    • 将$number限制在$min和$max之间
    • 如果$number小于$min，则返回$min；如果它大于$max，则返回$max
  • math.ceil($number) //=> number
  • math.floor($number) //=> number
  • math.round($number) //=> number
  • math.max($number...) //=> number
  • math.min($number...) //=> number
距离函数
  • math.abs($number) //=> number
  • math.hypot($number...) //=> number
    • 返回n维向量的长度，该向量的分量等于每个$number
指数函数
  • math.log($number, $base: null) //=> number
  • math.pow($base, $exponent) //=> number
  • math.sqrt($number) //=> number
三角函数
  • math.cos($number) //=> number
  • math.sin($number) //=> number
  • math.tan($number) //=> number
  • math.acos($number) //=> number
  • math.asin($number) //=> number
  • math.atan($number) //=> number
  • math.atan2($y, $x) //=> number
单位函数
  • math.compatible($number1, $number2) //=> boolean
    • 如果两个参数的单位相同则返回 true
  • math.is-unitless($number) //=> boolean
  • math.unit($number) //=> quoted string
其他函数
  • math.div($number1, $number2) //=> number
  • math.percentage($number) //=> number
math.random($limit: null) //=> number
  • 如果为 null 返回0到1之间的随机小数
sass:string 使组合、搜索或拆分字符串变得容易
  • string.index($string, $substring) //=> number
  • string.length($string) //=> number
  • string.quote($string) //=> string
  • string.unquote($string) //=> string
  • string.insert($string, $insert, $index) //=> string
  • string.slice($string, $start-at, $end-at: -1) //=> string
  • string.split($string, $separator, $limit: null) //=> list
  • string.to-upper-case($string) //=> string
  • string.to-lower-case($string) //=> string
string.unique-id() //=> string
  • 返回一个随机生成的无引号字符串
  • 该字符串保证是有效的CSS标识符，并且在当前Sass编译中是唯一的
sass:color 根据现有颜色生成新颜色，便于构建颜色主题
color.adjust($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) //=> color
  • 按固定数量增加或减少 $color 的一个或多个属性
color.change($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) //=> color
  • 设置 $color 的一个或多个属性为新值
color.scale($color, $red: null, $green: null, $blue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) //=> color
  • 按比例增加或减少 $color 的一个或多个属性
color.invert($color, $weight: 100%) //=> color
  • 返回$color的倒数或负数
  • color.mix($color1, $color2, $weight: 50%) //=> color
color.complement($color) //=> color
  • 返回 $color 的RGB模式补码，等于 color.adjust($color, $hue: 180deg)
color.grayscale($color) //=> color
  • 返回与 $color 亮度相同的灰色，等于 color.change($color, $saturation: 0%)
color.hwb //=> color
  • color.hwb($hue $whiteness $blackness)
  • color.hwb($hue $whiteness $blackness / $alpha)
  • color.hwb($hue, $whiteness, $blackness, $alpha: 1)
  • color.red($color) //=> number
  • color.green($color) //=> number
  • color.blue($color) //=> number
  • color.hue($color) //=> number
  • color.saturation($color) //=> number
  • color.lightness($color) //=> number
  • color.whiteness($color) //=> number
  • color.blackness($color) //=> number
  • color.alpha($color) //=> number
color.ie-hex-str($color) //=> unquoted string
  • 返回一个不带引号的字符串
  • 该字符串表示Internet Explorer的-ms-filter属性所需的#AARGGBB格式的$color
sass:list 允许您访问和修改列表中的值
list.is-bracketed($list) //=> boolean
  • 返回 $list 是否有方括号
list.separator($list) //=> unquoted string
  • 返回 $list 使用的分隔符的名称，可以是space, comma, slash
  • list.length($list) //=> number
  • list.index($list, $value) //=> number | null
  • list.append($list, $val, $separator: auto) //=> list
  • list.join($list1, $list2, $separator: auto, $bracketed: auto) //=> list
  • list.slash($elements...) //=> list
  • list.zip($lists...) //=> list
  • list.nth($list, $n)
  • list.set-nth($list, $n, $value) //=> list
sass:map 可以在映射中查找与键关联的值，还有更多功能
  • map.has-key($map, $key, $keys...) //=> boolean
  • map.get($map, $key, $keys...)
  • map.set($map, $key, $value) //=> map
  • map.keys($map) //=> list
  • map.values($map) //=> list
map.merge //=> map
  • map.merge($map1, $map2)
  • map.merge($map1, $keys..., $map2)
  • map.deep-merge($map1, $map2) //=> map
  • map.remove($map, $keys...) //=> map
  • map.deep-remove($map, $key, $keys...) //=> map
sass:selector 用于检查和操作选择器
选择器函数的返回值与参数
每当返回一个选择器时，返回值为一个逗号分隔的选择器列表，其中包含空格分隔的复合选择器列表（如.main aside:hover），其中又包含未加引号的字符串（组合选择器，如aside:hover）
  • 选择器函数的参数可以是逗号分隔的选择器列表，也可以是未加引号或者加引号的字符串，如 ".main aside:hover, .sidebar p" 是一个有效的选择器参数
selector.is-superselector($super, $sub) //=> boolean
  • 返回选择器$super是否与选择器$sub匹配的所有元素匹配
    • 即使$super匹配的元素多于$sub，仍然返回true
  • $super, $sub 可能包含占位符选择器，但不包含父选择器
Scss 示例
selector.append($selectors...) //=> selector
  • 不使用后代组合子组合$selectors，也就是说，它们之间没有空格
  • 如果$selectors中的任何选择器都是一个选择器列表，那么每个复合选择器都是单独组合的
  • $selectors 可能包含占位符选择器，但不包含父选择器
Scss 示例
selector.nest($selectors...) //=> selector
  • 组合$selectors，就好像它们在样式表中嵌套在一起一样
  • $selectors可能包含占位符选择器。与其他选择器函数不同，除第一个之外的所有选择器函数也可能包含父选择器
Scss 示例
selector.extend($selector, $extendee, $extender) //=> selector
返回使用以下@extend规则修改的$selector的副本
  • 换句话说就是将 $selector 中 $extendee 的所有实例替换为$extendee, $extender
  • 如果$selector不包含$extendee，则按原样返回
  • $选择器可能包含占位符选择器。与其他选择器函数不同，除第一个之外的所有选择器函数也可能包含父选择器
  • $selector, $extendee, $extender可能包含占位符选择器，但不包含父选择器
Scss 示例
selector.replace($selector, $original, $replacement) //=> selector
  • 返回$selector的副本，其中$original的所有实例都被$replacement替换
  • 如果$selector不包含$original，则按原样返回
这使用@extend规则的智能统一 intelligent unification 来确保$replacement无缝集成到$selector中
  • $selector, $original, $replacement可能包含占位符选择器，但不包含父选择器
Scss 示例
selector.unify($selector1, $selector2) //=> selector | null
  • 返回一个选择器，该选择器只匹配与$selector1和$selector2均匹配的元素
  • 与@extend规则生成的选择器一样，如果$selector1和$selector2都是复合选择器，则返回的选择器不能保证与它们匹配的所有元素匹配
Scss 示例
selector.parse($selector) //=> selector
  • 以选择器值的形式返回$selector
Scss 示例
selector.simple-selectors($selector) //=> list
  • 返回$selector中的简单选择器列表
  • $selector必须是包含复合选择器的单个字符串。这意味着它可能不包含组合子（包括空格）或逗号
  • 返回值是以逗号分隔且不带引号的字符串列表
Scss 示例
sass:meta 暴露了Sass内部工作的细节
meta.load-css($url, $with: null)
  • 用于加载位于 $url 的模块并将其 CSS 包含在此 mixin 中，就像它被写成此 mixin 的内容一样
  • $with 为模块传递参数，参数值必须是用于对应模块中的键值对映射
  • 如果 $url 是相对的，则将其解释为相对于包含 meta.load-css() 的文件
与 @use 规则的相似点
  • 即使以不同方式多次加载，也只会评估给定模块一次
  • 无法为已经加载的模块提供配置，无论它是否已经使用配置加载
与 @use 规则的区别
  • 这不会使来自加载模块的任何成员在当前模块中可用
  • 这可以在样式表的任何地方使用，甚至可以嵌套在样式规则中以创建嵌套样式
  • 被加载的模块 URL 可以来自变量并包含插值
Scss 示例
CSS 示例
  • meta.type-of($value) //=> unquoted string
meta.inspect($value) //=> unquoted string
  • 返回 $value 的字符串表示形式
meta.calc-name($calc) //=> quoted string
meta.calc-args($calc) //=> list
  • 返回给定 calc 函数的参数
meta.get-function($name, $css: false, $module: null) //=> function
  • 返回名为 $name 的函数
  • 如果 $module 为 null，则返回名为 $name 且没有命名空间（包括全局内置函数）的函数；否则，$module 必须是与当前文件中 @use 规则的命名空间匹配的字符串
  • 如果 $css 为 true，返回原生 CSS 函数
Scss 示例
CSS 示例
meta.keywords($args) //=> map
  • 返回传递给接受任意参数的mixin或函数的关键字
  • $args 参数必须是一个参数列表
Scss 示例
CSS 示例
  • meta.module-functions($module) //=> map
  • meta.module-variables($module) //=> map
  • meta.call($function, $args...)
  • meta.mixin-exists($name, $module: null) //=> boolean
meta.content-exists() //=> boolean
  • 返回当前 mixin 是否被传递了@content
meta.feature-exists($feature) //=> boolean
  • 返回当前 Sass 实现是否支持对应 $feature
$feature 必须是一个字符串，目前支持以下枚举值
  • `global-variable-shadowing` 意味着局部变量会覆盖全局变量，除非它具有 `!global` 标志。`extend-selector-pseudoclass` 意味着 `@extend` 规则会影响嵌套在伪类（如 `:not()`）中的选择器。`units-level3` 意味着单位运算支持在 CSS 值和单位级别 3 中定义的单位。`at-error` 意味着支持 `@error` 规则。`custom-property` 意味着自定义属性声明值不支持除插值之外的任何表达式。
  • global-variable-shadowing 意味着局部变量会覆盖全局变量，除非它具有 !global 标志
  • extend-selector-pseudoclass 意味着 @extend规则会影响嵌套在伪类（如:not()）中的选择器
  • units-level3 意味着单位运算支持在 CSS 值和单位级别 3 中定义的单位
  • at-error 意味着支持 @error 规则
  • custom-property 意味着自定义属性声明值不支持除插值之外的任何表达式
  • 不在范围内的其他值返回 false
  • meta.function-exists($name, $module: null) //=> boolean
  • meta.variable-exists($name) //=> boolean
  • meta.global-variable-exists($name, $module: null) //=> boolean
 

Sass 使用

Sass 命令行使用
  • Sass的不同实现在从命令行使用时具有不同的接口，下面以 Dark Sass 为准
一对一
  • sass <input.scss> [output.css]
多对多
  • sass [<input.scss>:<output.css>] [<input/>:<output/>]...
在编译整个目录时，Sass将忽略名称以_开头的局部文件（Partials files，只用于导入，无需编译该文件）
  • 可以使用局部文件来分离样式表，而无需创建一堆不必要的输出文件
选项 options
输入输出
  • --stdin
  • --indent
  • --load-path
  • --style
  • --no-charset
  • --error-css
  • --update
源映射
  • --no-source-map
  • --source-map--urls
  • --embeds-source
  • --embeds-source-map
其他
  • --watch
  • --poll
  • --stop-on-error
  • --interactive
  • --color
  • --no-unicode
  • --quiet
  • --quiet-deps
  • --fatal-deprecation
  • --trace
  • --help
  • --version
Sass JavaScript API
提供了两个入口点用于编译 Sass 至 CSS
  • 异步会慢些但可以自定义用于异步运行的 importer 和函数
compile, compileAsync 接受一个 Sass 文件路径
compileString, compileStringAsync 接受一个代表 Sass 文件内容的字符串
上一篇
Proxmox VE 网络配置
下一篇
数据分析思维：分析方法和业务知识
Comments
Loading...
Catalog