css预处理工具，可以将其对应的DSL（领域特定语言）编译成css基本介绍sass/scssSASS诞生于2007年，最早最成熟的CSSProcessor，具有ruby社区和compass的支持，最强大的css框架，Sass的缩进语法，对于习惯写css前端的web开发者来说不直观，sass不兼容css代码Sass3变成了Scss（sassycss)兼容原来的语法，只是把原来的缩进换成{}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，可以在用其他语言使用libSassnode-sassruby-sass和libsass安装node-sass时，会去GitHub下载一个.node文件，这个文件托管在墙外的服务器上，因此node-sass安装失败。解决方法如下.sass或.scss为文件后缀名（现在一般用scss）2009年很少出现，受sass影响较大，但使用CSS语法，让大部分开发者和设计者更容易上手。在ruby??社区之外的支持者远超SASS。缺点是和SASS相比，可编程功能不够，优点是简单，兼容CSS。反过来，也影响了sass向scss时代的进化。著名的TwitterBootstrap就是由LESS构成的。底层语言。less你可以在浏览器运行时使用less.js来解析less代码。也可以在node环境下安装less，提前编译less文件npminstall-gless&lesscstyles.lessstyles.css（可以加参数控制编译后的css布局和压缩）.less为文件后缀名stylusStylus，2010年出品，来自Node.js社区，主要用于支持Node项目的CSS预处理，由TJ大神开发安装编译npminstallstylus-g&stylussrc/（可以加参数控制排版和compressionofcompiledcss.)目前使用.styl作为文件后缀的情况一般都是用webpack来使用这些预处理语言。需要安装编译器，对应的加载器，然后配置module.rules其具体规则和基本语法less被输入。目前scss和stylus也可以支持css样式，用花括号写变量符号@$没有变量符号直接变量名//less@size:10px;.box{width:@size;}//scss$red:#c00;strong{color:$red;}//stylusred=#c00strongcolor:redcss的变量规范/*全局范围*/:root{--red:#c00;}strong{color:var(--red);}*可变作用域：less懒加载，sass，stylusnearbyloading嵌套语法一致，使用&引用父集--嵌套不建议超过4层*less不支持跳出嵌套*sass`@at-root````@at-root支持参数??，跳出不同嵌套without:all，表示allwithout:rule，表示常规css，rule为默认值without:media，表示mediawithout:支持，@support不广泛usednow//child1会跳出parent.parent1的嵌套{颜色：#f00;@at-root.child1{宽度：200px;}}}```插值//less@prefix:ui;.@{prefix}-button{color:#333;}//sass$prefix:ui.#{$prefix}-button{color:#333;}//stylusprefix=ui.{prefix}-buttoncolor#333mixin：预处理器最本质的功能，样式层面的抽象（相当于复制代码片段）less直接import//定义mixin，可以使用。或者#语句，#key(){}，也可以省略().border(){width:200%;//控制边框的长度或长度height:200%;位置：绝对；顶部：0；左：0；z-索引：0；内容：””;变换：比例（0.5）；变换原点：00；box-sizing:border-box;}#top-1px(@color:#ccc){position:relative;&:after{border-top:1pxsolid@color;.border()}}scss@mixin必须先声明，@include使用时继承函数逻辑控制：sass，stylus支持ifelseforeachwhile,less使用mixinwhen处理具体语法见官方文档总结：sass大而全，出现时间最长，但依赖ruby（compass）较少，可以从css平滑过渡来，可以在运行时解析，缺少一些逻辑功能。Stylus起源于nodejs社区，语法灵活。有官方开发的样式库nib，里面也提供了很多好用的mixinPostcss。是一种怎样的存在？PostCSS既不是预处理器也不是后处理器，而是一个本身不处理任何问题的平台对于具体的任务，只有我们给它加上各种插件，它才会实用。PostCSS就像一个推动者。它不能完全替代现有的预处理器或后处理器，而只能作为它们的补充工具PostCSS的工作机制主要包括解析代码、执行插件、渲染结果三部分：PostCSS会解析css代码成包含一系列节点的抽象语法树（AST，AbstractSyntaxTree）。PostCSS常用插件（这些插件合集其实可以替代三大css预处理器）cssnext，futuresyntax，colorfunctions...postcss-import，导入文件autoprefixer，自动前缀precss，集成sass预处理器，强大的功能包括autoprefixermixinspostcss-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.jsmodule.exports={plugins:[require('autoprefixer')({'browsers':['>1%','last2versions']})]}参考知乎三种预处理器对比
