本文已参与「新人创作礼」活动，一起开启掘金创作之路。

背景

第一次接触这个CSS预处理器。预处理器赋予了我们的 “超能力”。

CSS 预处理器

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。 CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量（$color）、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

主要目的

CSS语法不够强大（例如：CSS选择器无法进行嵌套，导致CSS中存在较多重复的选择器语句）；CSS中无法定义变量以及没有合理的样式复用机制，导致整体CSS样式难以维护。

.body .box .title {
  color: #478fb7;
  font-size: 17px;
}
.body .box .name {
  color: #478fb7;
  font-size: 12px;
}

为了减少CSS代码冗余，为CSS提供样式复用机制，提高CSS代码的可维护性。

工作流程

各种预处理器语法不一样，但最终工作流程是一样的，以Sass为例。

以Sass提供的语法规则编写样式代码。

经过编译器把Sass编写的代码转换成标准的CSS代码。

浏览器加载解析转换后的CSS样式（浏览器只能解析标准的CSS代码，而不能是Sass等）。

三个主流 CSS 预处理器

三个常见的CSS 预处理器（框架）【也是最优秀的】：Sass（SCSS）、Less 和 Stylus。还没见过的的CSS 预处理器，如Turbine、Swithch CSS、CSS Cacheer、DT CSS。

1、Sass（SCSS）

分类	链接地址
官网	sass-lang.com/
官方仓库	github.com/sass/sass

Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装Sass。 2007年，最早最成熟的CSS预处理器，有两种语法，分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法，完全兼容CSS3，并继承了Sass的强大功能，和CSS语法结构更接近。

2、Less

分类	链接地址
官网	lesscss.org/
官方仓库	github.com/less/less.j…

2009年，受Sass影响大，以 .less 为扩展名。

3、Stylus

分类	链接地址
官网	stylus-lang.com/
官方仓库	github.com/stylus/styl…

2010年，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名。

/* 原生 CSS 代码 */
strong {
   color: #ff4466;
   font-weight: bold;
}

.notice {
   color: #ff4466;
}

// 用 Stylus 来写
$color-primary = #ff4466
strong
   color: $color-primary
   font-weight: bold
/* ... */
.notice
   color: $color-primary

你可能已经意识到了，变量让开发者更容易实现网站视觉风格的统一，也让 “换肤” 这样的需求变得更加轻松易行。

Bootstrap不同版本使用不同的CSS 预处理器

bootstrap（Web框架）版本3【v3.bootcss.com/】，使用的就是Less。 bootstrap（Web框架）版本4【v4.bootcss.com/】，使用的就是Sass。 bootstrap（Web框架）版本5【v5.bootcss.com/】，使用的就是Sass。

Bootstrap3 官网可以看到，也针对从 Less 到 Sass 的源码移植项目【github.com/twbs/bootst…】，用于快速地在 Rails、Compass 或只针对 Sass 的项目中引入。

CSS预处理器的使用

集成在前端开发工具中使用（插件），如 VS Code、WebStorm 等。

集成在项目构建工具中，在项目编译（打包）时进行自动转换，如 webpack、gulp等。

感谢

博主对前端的很多东西只是皮毛，有不对的地方，欢迎批评指正哈。

如果您认为这篇文章还不错或者有所收获，您可以点击右下角的【点赞】支持，或请我喝杯咖啡【赞赏】，这将是我继续写作，分享的最大动力！作者：勤快的小蚂蚁声明：原创博客请在转载时保留原文链接或者在文章开头加上本人博客地址，如发现错误，欢迎批评指正。凡是转载于本人的文章，不能设置打赏功能，如有特殊需求请与本人联系！

版权声明

本文为CSDN博主「勤快的小蚂蚁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：blog.csdn.net/fxzzq/artic…

Bootstrap的不同版本使用的CSS 预处理器的不一样的

背景