非常教程

PostCSS 参考手册

PostCSS插件

语言扩展

语言扩展

  • postcss-aspect-ratio 将元素的尺寸固定为宽高比。
  • postcss-atroot 直接在根节点放置规则。
  • postcss-bem 为BEM和SUIT样式类添加了规则。
  • postcss-click允许使用:click伪类并在JavaScript中实现它。
  • postcss-compact-mq 为视口宽度的媒体查询提供紧凑的语法。
  • postcss-conditionals添加@if声明。
  • postcss-css-variables 支持选择器的变量,以及使用W3C类似语法的at-rules。
  • postcss-current-selector 在声明中获取当前选择器。
  • postcss-define-property 定义属性快捷方式。
  • postcss-define-function实现Sass @function指令。
  • postcss-each补充@each声明。
  • postcss-for添加@for循环。
  • postcss-at-rules-variables增加了对自定义属性的支持 @for@each@if,等。
  • postcss-functions 允许暴露JavaScript函数。
  • postcss-if-media CSS规则和属性中的内联或嵌套媒体查询。
  • postcss-local-constants 增加了对局部常量的支持。
  • postcss-map 启用配置映射。
  • postcss-match增加@match了锈风格的模式匹配。
  • postcss-mixins 使得mixins比Sass'更强大,在样式表或JS中定义。
  • postcss-media-variables增加了对支持var()calc()@media规则
  • postcss-modular-scale增加了模块化比例ms()功能。
  • postcss-namespace 将命名空间前缀添加到选择器。
  • postcss-nested 展开嵌套规则。
  • postcss-nested-props 展开嵌套属性。
  • postcss-nested-vars 支持嵌套的Sass样式变量。
  • postcss-pseudo-class-any-button添加:any-button伪类以定位所有按钮元素。
  • postcss-pseudo-class-enter转换:enter:hover:focus
  • postcss-quantity-queries 启用数量查询。
  • postcss-ref 引用其他规则的属性。
  • postcss-reverse-media 反向/反向媒体查询参数。
  • postcss-sassy-mixins 使用Sass关键字启用mixins。
  • postcss-simple-extend轻量级扩展的静音类,如Sass'  @extend
  • postcss-simple-vars 支持Sass风格的变量。
  • postcss-strip-units 剥离单位的财产价值。
  • postcss-vertical-rhythm添加基于font-size和的垂直节奏单位line-height
  • postcss-vertical-rhythm-function添加一个vr()与设备无关的垂直节奏功能,适用于在构建时无法计算字体大小的情况。
  • postcss-responsive-properties 允许您编写响应属性值。
  • postcss-text-remove-gap 删除文本字符串前后的空格,由字形高度和字形本身的额外空格添加。
  • postcss-closest 插件修改当前选择器的最接近匹配部分。
  • csstyle 为您的样式添加组件工作流程。
  • postcss-percentage支持Sass式percentage()功能。
  • postcss-state-selector 根据组件的状态编写CSS。

另请参阅插件包以通过一行代码添加它们。precss

PostCSS

PostCSS 是一个利用 JS 插件来对 CSS 进行转换的工具

PostCSS 目录

1.快速上手
2.PostCSS插件指南
3.PostCSS runner指南
4.编写自定义语法
5.PostCSS插件
6.PostCSS和源地图