postcss-short-overflow

2018-10-23 admin

postcss-short-overflow是什么

什么是postcss-short-overflow,Write overflow-x and overflow-y with the overflow shorthand in CSS

postcss-short-overflow使用教程帮助文档

PostCSS Short Overflow PostCSS

NPM Version Build Status Support Chat

PostCSS Short Overflow lets you write overflow-x and overflow-y with the overflow shorthand in CSS.

html {
  overflow: hidden auto;
}
[contenteditable] {
  overflow: * auto;
}
/* becomes */
html {
  overflow-x: hidden;
  overflow-y: auto;
}
[contenteditable] {
  overflow-y: auto;
}

Usage

Add PostCSS Short Overflow to your project:

npm install postcss-short-overflow --save-dev

Use PostCSS Short Overflow to process your CSS:

const postcssShortOverflow = require('postcss-short-overflow');
postcssShortOverflow.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssShortOverflow = require('postcss-short-overflow');
postcss([
  postcssShortOverflow(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Short Overflow runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp 电子书 iis7站长之家

Options

prefix

The prefix option defines a prefix required by properties being transformed. Wrapping dashes are automatically applied, so that x would transform -x-overflow.

postcssShortOverflow({ prefix: 'x' });
html {
  -x-overflow: hidden auto;
}
/* becomes */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

skip

The skip option defines the skip token used to ignore portions of the shorthand.

postcssShortOverflow({ skip: '-' });
[contenteditable] {
  overflow: - auto;
}
/* becomes */
[contenteditable] {
  overflow-y: auto;
}

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43425.html

文章标题:postcss-short-overflow

回到顶部