Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

vor 3 Jahren
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. # PostCSS Place 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 Place Properties] lets you use `place-*` properties as shorthands for `align-*`
  7. and `justify-*`, following the [CSS Box Alignment] specification.
  8. ```pcss
  9. .example {
  10. place-self: center;
  11. place-content: space-between center;
  12. }
  13. /* becomes */
  14. .example {
  15. align-self: center;
  16. justify-self: center;
  17. place-self: center;
  18. align-content: space-between;
  19. justify-content: center;
  20. place-content: space-between center;
  21. }
  22. ```
  23. ## Usage
  24. Add [PostCSS Place Properties] to your project:
  25. ```bash
  26. npm install postcss-place --save-dev
  27. ```
  28. Use [PostCSS Place Properties] to process your CSS:
  29. ```js
  30. import postcssPlace from 'postcss-place';
  31. postcssPlace.process(YOUR_CSS /*, processOptions, pluginOptions */);
  32. ```
  33. Or use it as a [PostCSS] plugin:
  34. ```js
  35. import postcss from 'postcss';
  36. import postcssPlace from 'postcss-place';
  37. postcss([
  38. postcssPlace(/* pluginOptions */)
  39. ]).process(YOUR_CSS /*, processOptions */);
  40. ```
  41. [PostCSS Place Properties] runs in all Node environments, with special instructions for:
  42. | [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
  43. | --- | --- | --- | --- | --- |
  44. ## Options
  45. ### preserve
  46. The `preserve` option determines whether the original place declaration is
  47. preserved. By default, it is preserved.
  48. ```js
  49. postcssPlace({ preserve: false })
  50. ```
  51. ```pcss
  52. .example {
  53. place-self: center;
  54. place-content: space-between center;
  55. }
  56. /* becomes */
  57. .example {
  58. align-self: center;
  59. justify-self: center;
  60. align-content: space-between;
  61. justify-content: center;
  62. }
  63. ```
  64. [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-place.svg
  65. [cli-url]: https://travis-ci.org/jonathantneal/postcss-place
  66. [css-img]: https://cssdb.org/badge/place-properties.svg
  67. [css-url]: https://cssdb.org/#place-properties
  68. [git-img]: https://img.shields.io/badge/support-chat-blue.svg
  69. [git-url]: https://gitter.im/postcss/postcss
  70. [npm-img]: https://img.shields.io/npm/v/postcss-place.svg
  71. [npm-url]: https://www.npmjs.com/package/postcss-place
  72. [CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content
  73. [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
  74. [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
  75. [PostCSS]: https://github.com/postcss/postcss
  76. [PostCSS Loader]: https://github.com/postcss/postcss-loader
  77. [PostCSS Place Properties]: https://github.com/jonathantneal/postcss-place