工程化关注:
- 组织
- 优化
- 构建
- 维护
PostCSS
CSS –> PostCSS(解析转换) –> CSS
可以作:
- 模块化
- 加前缀
- 兼容性
- …
PostCSS本身只有解析能力
各种神奇的特性全靠插件
目前至少有200多个插件
常用的插件:
- import模块合并
- autoperfixier 自动加前缀
- cssnnao 压缩代码
- cssnext 使用CSS新特性
- precss 变量, mixin, 循环等
安装:
1 | npm install postcss-cli |
使用:
1 | postcss input.css -o out.css |
插件
postcss.config.js
引用各种插件
1 | const cssnano = require('cssnano'); |
cssnext
使用CSS新特性
特性:
- custom properties & var()
- automatic vendor prefixes
- custom properties set & @apply
- reduced calc()
- custom media queries
- media queries ranges
- custom selectors
- nesting
- image-set() function
- color() function
- hwb() function
- gray() function
- #rrggbbaa colors
- rgba function (rgb fallback)
- rebeccapurple color
- font-variant property
- filter property (svg fallback)
- initial value
- rem unit (px fallback)
- :any-link pseudo-class
- :matches pseudo-class
- :not pseudo-class (to l.3)
- ::pseudo syntax (: fallback)
- overflow-wrap property (word-wrap fallback)
- attribute case insensitive
- rgb() function (functional-notation)
- hsl() function (functional-notation)
- system-ui font-family (font-family fallback)
CSS变量举例:
1 | :root { |
postcss.config.js
1 | const cssnext = require('postcss-cssnext'); |
precss
- PreCSS中的嵌套可以使用 & 符,把父选择器复制到子选择器中
- PreCSS使用 符声明变量,比如color: #ccc
- PreCSS中用 @if 和 @else 来控制循环
- PreCSS中用 @define-mixin mixin_name arg1,arg2{…} 语法来声明混合宏
- PreCSS中用 @mixin mixin_name pass_arg1, pass_arg2; 语法来调用混合宏
- PreCSS中用 @mixin-content 保留传递内容
- PreCSS中使用 @define-extend extend_name{…} 来声明可扩展的代码块
- PreCSS中使用 @extend extend_name 语法来调用声明的代码扩展块
- PreCSS可以使用 @import 中导入CSS文件
构建工具
PostCSS 支持的构建工具:
- CLI 命令行工具
- webpack postcss-loader
- Gulp gulp-postcss
- Grunt grunt-postcss
- Rollup rollup-postcss
- …
gulp-postcss
gulpfile.js
webpack
- JS是整个应用的核心入口
- 一切资源均由JS管理依赖
- 一切资源均由webpack打包
webpack处理CSS
js 引用 CSS, css-loader/sytle-loader, 将CSS文件转换成 JS文件
1 | require(./xxx.css); |
css-modules
- 是什么?
CSS模块化的一种解决方案(对css类名限定作用域的一种,只限定类选择器,对id、元素等选择器不管) - 原理?
通过 webpack 在构建过程中,给类名起一个独一无二的名字,这个名字可以通过webpack配置 - 好处?
- 避免类名重复导致样式覆盖问题;
- JS & CSS 共享变量
- 健壮可扩展
extract-text-plugin
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
从js将样式抽离出来生成CSS文件
其它
如何解决CSS模块化问题
- Less Sass 等CSS预处理器
- PostCSS插件 (postcss-import / precss等)
- webpack处理CSS (css-loader + style-loader)
PostCSS 可以作什么?
- 取决于插件可以做什么
- autoprefixer cssnext precss等 兼容性处理
- import 模块合并
- css语法检查 兼容性检查
- 压缩文件
CSS modules 是做什么的,如何使用
- 解决类名冲突的问题
- 使用PostCSS或者webpack等构建工具进行编译
- 在HTML模版中使用编译过程产生的类名
为什么使用JS来引用,加载CSS
- JS作为入口,管理资源有天然优势
- 将组件的结构,样式,行为封装到一起,增强内聚
- 可以做更多处理(webpack)