css 预处理工具，可以将其对应的DSL(领域特定语言)编译为 css
基本介绍
sass/scss
-
SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架
-
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，sass 不兼容 css 代码
-
Sass3 就变成了Scss(sassy css) 与原来的语法兼容，只是用{}取代了原来的缩进
-
sass 的运行 依赖于 ruby 环境（
compass 将 sass 编译为 css） -
现在可用
node-sass来编译sass/scss文件-
node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具
-
原始的sass 是用 ruby 编写的，所以需要 ruby 环境，libSass 是原始sass引擎的一个 c/c++ 接口，使用它编译sass不依赖于ruby，可以使用其他语言使用libSass
-
安装
node-sass时，会去GitHub 下载一个.node的文件而这个文件托管在墙外的服务器上，所以失败了node-sass安装失败解决方案
-
-
以
.sass或.scss为文件后缀名称（现在一般都是用 scss）
less
- less 2009年出现，受sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了sass演变到了scss的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
- less 可以使用
less.js在浏览器运行时中解析 less 代码 - 也可以在 node环境中 安装 less，提前编译 less 文件
npm install -g less &lessc styles.less styles.css(可以加参数控制编译后的css排版及压缩) - 以
.less为文件后缀名称
stylus
- Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，由 TJ大神开发
- 安装及编译
npm install stylus -g & stylus src/(可以加参数控制编译后的css排版及压缩) - 以
.styl为文件后缀
使用现状
- 现在一般都是配合webpack使用这几种预处理语言，需要先
安装 编译器、对应 loader，然后再module.rules 配置其具体规则
基本语法
- less 基本语法属于 css 风格，而 sass，stylus 利用缩进，空格，换行来减少需要输入的 字符
- 目前 scss, stylus 也可以支持 css 风格，用大括号 来书写
-
变量符
@ $ 无变量符号直接变量名less @size: 10px; .box { width: @size; } scss $red: #c00; strong { color: $red; } stylus red = #c00 strong color: red css 的变量规范 /* global scope */ :root { --red: #c00; } strong { color: var(--red); } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）* 变量作用域：less 惰性加载，sass，stylus 就近加载 -
嵌套语法一致，用
& 引用父集-- 嵌套不建议超过 4 层* less 不支持跳出嵌套 * sass `@at-root`@at-root 支持参数，跳出不同的嵌套
without： all，表示所有
without: rule，表示常规css，rule是默认值
without: media，表示media
without: support，@support现在使用还不广泛// child1 将跳出 parent 的嵌套
.parent1{
color:#f00;
@at-root .child1 {
width:200px;
}
}
} -
插值
less @prefix: ui; .@{prefix}-button { color: #333; } sass $prefix: ui .#{$prefix}-button { color: #333; } stylus prefix = ui .{prefix}-button color #333 -
混入（mixin）：预处理器最精髓的功能，样式层面上的抽象（相当于copy代码片段）
- less 直接引入
- scss 要先声明
@mixin,使用时@include
-
继承
-
函数
-
逻辑控制：sass, stylus 支持
if else for each while, less 使用mixin when 处理
- 具体语法看官方文档
总结：
- sass 大而全，出现时间最久，但依赖于 ruby (compass)
- less 可以平滑的从 css 过度而来，可以在运行时解析，逻辑功能有些缺失
- stylus 起源 nodejs 社区，语法灵活， 有一个官方开发的样式库 nib，同样提供了不少好用的 mixin
Postcss 是什么样的一种存在？
-
PostCSS 既不是预处理器也不是后处理器，而是一个平台，其本身并不处理任何具体任务，只有当我们为其附加各种插件之后，他才具有实用性
-
PostCSS 就像是一个使能器（enabler），他可以不用完全替代现有的预处理器或后处理器，而只是作为他们的补充工具。PostCSS的工作机制主要包含解析代码、执行插件、渲染结果三部分：
-
PostCSS 会将css代码解析成包含一系列节点的抽象语法树（AST, Abtract Syntax Tree）。
-
PostCSS常用插件 （用这些插件集合其实已经可以代替 三大 css 预处理器）
- cssnext, 未来语法，颜色函数...
- postcss-import, 导入文件
- autoprefixer, 自动前缀
- precss, 集成sass预处理器，功能强大包括 autoprefixer mixins
- postcss-mixins, 混合宏，是用类似sass的混合宏，不可与 precss 混用
- postcss-conditions 逻辑判断
- ...
-
目前 Postcss 在一般项目中的用途
- 使用其
autoprefixer插件，为css 属性增加前缀 - 创建
postcss.config.js
// webpack.config.js { test: /\.less$/, loader: ExtractTextWebpackPlugin.extract([ {loader: 'css-loader', options: { minimize: true }}, 'postcss-loader', // 要在预处理器处理完之后，在使用 postcss-loader 'less-loader', ]), } // postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ 'browsers': ['> 1%', 'last 2 versions'] }) ] } - 使用其
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
```
网友评论