Sass | Less
Syntactically Awesome Style Sheets

CSS 预处理器
CSS 预处理器是独有的语法来生成 CSS 的程序,如 Sass、Less、PostCSS。预处理器是一种脚本语言,在扩展 CSS 的同时,使其具有易于维护且可读性高的特点,并最终将其编译回常规 CSS 输出。
Sass|Scss
Sass 最初在 2006 年用 Ruby 编写的,使用缩进式语法来表示代码块和层级的关系,与 YML (YAML) 文件的语法非常相似。需要注意的是,目前 Sass 的官方推荐版本是用 Dart 语言重新实现的 Dart Sass,具有更快的编译速度和更好的兼容性。
尽管如此,后来的版本中引入了 SCSS(Sassy CSS)语法,该语法和普通的 CSS 语法几乎完全相同,只是添加了一些额外的功能,例如条件语句、循环和函数等。
Regular use of Sass
运行命令来安装 Sass 和 sass-loader,并在配置文件中使用相应的 loader 来处理 SCSS 文件。
在完成上述的步骤后,就可以在项目中创建以 .scss
后缀结尾的文件,并使用 CSS 语法来编写样式。
变量插入
将变量视为一种存储信息的方式,在整个样式表中重复使用这些信息。存储诸如颜色、字体堆栈或任何 CSS 值之类的内容。Sass 使用 $ 符号来使某些数据成为变量。
层次嵌套
Sass 可以嵌套 CSS 选择器,以遵循 HTML 的相同视觉层次结构。不过注意,使用过度的嵌套规则将导致高度耦合的 CSS,这会导致代码难以维护。
Partials模块
创建模块化的 Sass 文件,其可以作为包含在其他 Sass 文件中的 CSS 片段,易于维护。Partial 是一个以下划线开头的 Sass 文件,其命名为 _partial.scss. 下划线让 Sass 知道该文件只是部分文件,不应将其生成为CSS文件。Sass 部分与@use 规则一起使用。
可以根据需要将 Sass 其拆分为 @use 规则。此规则将另一个 Sass 文件加载为 module,这意味可以使用基于文件名的命名空间在 Sass 文件中引用其变量、mixin和函数。使用文件还将在编译输出中包含它生成的 CSS。
Mixins
mixin 可以创建全局作用域中可复用的 scss 块,同时可以指定参数传入给 mixin。@mixin 作为复用代码块前缀常伴随 @include 调用并指定传参。
扩展与继承
@extend 允许将一组CSS属性从一个选择器共享到另一个选择器。它有助于保持你的 Sass 非常干燥。在我们的示例中,我们将使用另一个与扩展、占位符类齐头并进的功能,为错误、警告和成功创建一系列简单的消息传递。占位符类是一种特殊类型的类,仅在扩展时才打印,有助于保持编译后的CSS整洁干净。
算数操作Operate
在 SCSS 中可以进行数学运算,在 CSS 中可能需要借助 calc()。SCSS 拥有标准的数学运算符,+、-、*、/ 和 %。
Less
操作函数
支持算术运算符、逻辑运算符等,以对任何数字、颜色或变量进行运算,甚至编码操作(scape)。
变量插入
父选择器
拓展语法
组合属性
混合属性
@import 规则
在标准 CSS 中,@importat 规则必须在所有其他类型的规则之前。但是 Less 并不关心你把 @import 语句放在哪里。@import 根据不同文件扩展名会以不同的方式处理语句:.css 扩展名将被视为 CSS 并且 @import 语句保持原样、有任何其他扩展名将被视为 Less 并导入、没有扩展名将作为导入的 Less 文件且 .less 将被附加包含在内。
Sass and Less selection
Sass 和 Less 都具有强大的功能特性,如变量、嵌套、混合、继承等,然而 Sass 在功能上会更加丰富一些,例如条件语句、循环和函数等。一般来说,Sass 的编译速度比较快,而 Less 的编译速度稍慢一些。但是,在实际应用中,这些差异可能并不明显,并不是决定性因素。通常来说,Sass 和 Less 都有庞大的社区支持,但 Sass 的生态系统更为成熟和广泛。
效果增强
阴影动画
Bugs 处理
- sass 版本兼容问题
卸载之前版本,安装 node-sass@4.14.1,其他版本可能导致 bugs 仍然存在。
- 关于 node-sass 里面 vendor 缺失
可以找到缺失的文件直接从 node-sass 官网下载;或者删除 node_modules 重新下载;或者重新构建 node-sass。
结束
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处!