web前端入门到实战：css预处理器 - sass/scss、less、stylus

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） ```

本文章由javascript技术分享原创和收集