CSS 预处理器
目录
目录预处理器简介
什么是预处理器？
预处理器把我们编写的源文件转译成输出文件，即常规样式表。
使用预处理器变量的示例：
$brand-blue: #0086b3;
a:link {
color: $brand-blue;
}
.page-heading {
font-size: 1.6rem;
color: $brand-blue;
}
预处理器的作用？
预处理器不仅有助于提高代码书写效率，还利于后期维护。
例如，使用预处理器我可以复用一段样式。
预处理器中比较流行的两个是 Sass 和 Less。
Less和Sass类似，主要是一些语法上的细节有区别。
Sass
建议学习Sass中文文档。
Sass 是用 Ruby 写的，但因为这种实现方式在编译大型样式表的时候比较慢，所以建议使用 LibSass，这是用 C/C++实现的 Sass 编译器。
可以通过 npm 包管理工具安装 node-sass，也可以获取 LibSass。
LibSass 和 Node Sass 已弃用。虽然他们将继续无限期地接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。仍在使用它的项目应该转移到 Dart Sass上。
Node-sass 是一个库，它提供 Node.js 到LibSass的绑定，LibSass是 Sass 的 C 版本。
安装 Sass
- 新建项目目录
- 初始化一个新的 npm 项——
npm init -y，创建 package.json 文件。 - 安装 node-sass 包——
npm install –save-dev node-sass，并把它作为开发依赖写入package.json。
在 Windows 系统中，还需要安装 node-gyp 包。更多信息查看 Github的sass/node-sass。
从国内镜像安装：
npm install -g mirror-config-china --registry=https://registry.npmmirror.com
npm install node-sass
用法
var sass = require('node-sass');
sass.render({
file: scss_filename,
[, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
data: scss_content
[, options..]
});
选项
file
- Type:
String - Default:
null
Special: file or data must be specified
Path to a file for LibSass to compile.
data
- Type:
String - Default:
null
Special: file or data must be specified
A string to pass to LibSass to compile. It is recommended that you use includePaths in conjunction with this so that LibSass can find files when using the @import directive.
Scss
Sass 支持两种语法：Sass 和 Scss。它们的语言特性一样，但 Sass 语法去掉了所有的大括号和分号，严格使用缩进来表示代码结构。
这有点类似于 Ruby 和 Python 这样的编程语言，空格是有意义的。SCSS 语法使用大括号和分号，因此看起来更像常规 CSS。
SCSS 文件使用 .scss 扩展名，Sass 文件使用 .sass 扩展名。
运行 Sass
安装好 Sass 后，我们新建一个文件夹 sass 和一个文件夹 build，sass 用来放源文件，生成的 CSS 文件放入 build。
修改 package.json 文件的 scripts 入口：
"scripts": {
"sass": "sass sass/index.scss build/styles.css"
},
运行 npm run sass，执行这条命令，就会生成（或者覆盖）build/styles.css 样式表。
像 Grunt、Gulp 和 Webpack 这些常见的任务构建工具，会有一些可以使用的插件，比如 gulp-sass。如果你想使用插件，可以找一款 Sass 或者 Less 的，集成到自己最熟悉的工作流中。
核心特性
行内计算
Sass 支持 Sass变量使用 +、-、*、/ 和 %，这样我们可以从一个初始值获得多个新值。
嵌套选择器
.div{
display:flex;
> a{
margin:1em;
&.isVisited{
color:blue;
}
}
}
以上 scss 代码将生成 css：
.div{
display:flex;
}
.div > a .isVisited{
margin:1em;
}
.div > a .isVisited{
color:blue;
}
局部文件(@import)
可以建立多个独立的 scss 文件，比如我们维护一个按钮样式，有时不得不在成千上万代码里寻找，是比较困难的，我们可以把它写成一个局部文件从而分离出来，通过语法 @import "scss文件名" 来插入这些样式。
混入
混入（mixin）是一小段 CSS 代码块，可以在样式表任意地方复用。
如果有一段特定的字体样式需要在多个地方使用，或者类似于清除浮动这样常用的重复规则，使用混入就比较合适。
混入使用 @mixin 规则来定义，使用 @include 规则来调用。
@mixin clearfix {
&::before {
display: table;
content: " ";
}
&::after {
clear: both;
}
}
.media {
@include clearfix;
background-color: #eee;
}
继承
@extend 规则类似于 @mixin，但不会多次复制相同的声明，而是把使用了 @extend 的选择器组合起来。
.a{
样式1
}
.b{
@extend .a;
样式2
}
.c{
@extend .a;
样式3
}
以上代码将生成：
.a,
.b,
.c{
样式1
}
.b{
样式2
}
.c{
样式3
}