web 3d图形渲染器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

89 lines
2.5 KiB

  1. # PostCSS Gap Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
  2. [![NPM Version][npm-img]][npm-url]
  3. [![CSS Standard Status][css-img]][css-url]
  4. [![Build Status][cli-img]][cli-url]
  5. [![Support Chat][git-img]][git-url]
  6. [PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap`
  7. shorthand properties in CSS, following the [CSS Grid Layout] specification.
  8. ```pcss
  9. .standard-grid {
  10. gap: 20px;
  11. }
  12. .spaced-grid {
  13. column-gap: 40px;
  14. row-gap: 20px;
  15. }
  16. /* becomes */
  17. .standard-grid {
  18. grid-gap: 20px;
  19. gap: 20px;
  20. }
  21. .spaced-grid {
  22. grid-column-gap: 40px;
  23. column-gap: 40px;
  24. grid-row-gap: 20px;
  25. row-gap: 20px;
  26. }
  27. ```
  28. ## Usage
  29. Add [PostCSS Gap Properties] to your project:
  30. ```bash
  31. npm install postcss-gap-properties --save-dev
  32. ```
  33. Use [PostCSS Gap Properties] to process your CSS:
  34. ```js
  35. import postcssGapProperties from 'postcss-gap-properties';
  36. postcssGapProperties.process(YOUR_CSS /*, processOptions, pluginOptions */);
  37. ```
  38. Or use it as a [PostCSS] plugin:
  39. ```js
  40. import postcss from 'postcss';
  41. import postcssGapProperties from 'postcss-gap-properties';
  42. postcss([
  43. postcssGapProperties(/* pluginOptions */)
  44. ]).process(YOUR_CSS /*, processOptions */);
  45. ```
  46. [PostCSS Gap Properties] runs in all Node environments, with special instructions for:
  47. | [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
  48. | --- | --- | --- | --- | --- |
  49. ## Options
  50. ### preserve
  51. The `preserve` option determines whether the original `gap` declaration should
  52. remain in the CSS. By default, the original declaration is preserved.
  53. [css-img]: https://cssdb.org/badge/gap-properties.svg
  54. [css-url]: https://cssdb.org/#gap-properties
  55. [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-gap-properties.svg
  56. [cli-url]: https://travis-ci.org/jonathantneal/postcss-gap-properties
  57. [git-img]: https://img.shields.io/badge/support-chat-blue.svg
  58. [git-url]: https://gitter.im/postcss/postcss
  59. [npm-img]: https://img.shields.io/npm/v/postcss-gap-properties.svg
  60. [npm-url]: https://www.npmjs.com/package/postcss-gap-properties
  61. [CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters
  62. [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
  63. [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
  64. [PostCSS]: https://github.com/postcss/postcss
  65. [PostCSS Loader]: https://github.com/postcss/postcss-loader
  66. [PostCSS Gap Properties]: https://github.com/jonathantneal/postcss-gap-properties