【前端】当前主流的 CSS 预处理器语言Sass / SCSS、Less、Stylus
当前主流的 CSS 预处理器语言 主要有以下几种,它们都通过提供变量、嵌套、混入、函数等强大功能来增强原生 CSS,提升开发效率和可维护性:
-
Sass / SCSS (Syntactically Awesome Style Sheets)
- 特点:
- 语法丰富且强大,是功能最全面的预处理器之一。
- 有两种语法:
- SCSS (
*.scss
): 使用类似于 CSS 的花括号{}
和分号;
,是 最主流、最推荐的 Sass 语法,学习曲线平缓(CSS 文件可以直接重命名为.scss
)。 - 缩进语法 / Sass (
*.sass
): 使用缩进代替花括号和分号,更简洁但对格式要求严格(现在较少用)。
- SCSS (
- 支持变量、嵌套规则、混入(Mixin)、继承(Extend/Inheritance)、运算符、函数、控制指令(如 @if, @for, @each, @while)、模块化(@use, @forward)、命名空间等。
- 社区: 非常成熟和庞大,有大量框架(如 Compass、Bourbon)和工具支持。
- 特点:
-
Less (Leaner Style Sheets)
- 特点:
- 语法设计目标是尽可能接近 CSS,与 SCSS 也非常相
- 特点: