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