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.

79 lines
2.2 KiB

  1. # PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" 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 Nesting] lets you nest style rules inside each other, following the
  7. [CSS Nesting] specification.
  8. ```pcss
  9. a, b {
  10. color: red;
  11. & c, & d {
  12. color: white;
  13. }
  14. }
  15. /* becomes */
  16. a, b {
  17. color: red;
  18. }
  19. a c, a d, b c, b d {
  20. color: white;
  21. }
  22. ```
  23. **NOTICE**: In a future version of this project, nesting at-rules like `@media`
  24. may be deprecated, as they are not part of the nesting proposal. In a comment,
  25. a CSSWG member expressed interest in handling nested `@media` while handling
  26. selector nesting. So deprecating nested at-rules has been temporarily delayed.
  27. ## Usage
  28. Add [PostCSS Nesting] to your project:
  29. ```bash
  30. npm install postcss-nesting --save-dev
  31. ```
  32. Use [PostCSS Nesting] to process your CSS:
  33. ```js
  34. import postcssNesting from 'postcss-nesting';
  35. postcssNesting.process(YOUR_CSS /*, processOptions, pluginOptions */);
  36. ```
  37. Or use it as a [PostCSS] plugin:
  38. ```js
  39. import postcss from 'postcss';
  40. import postcssNesting from 'postcss-nesting';
  41. postcss([
  42. postcssNesting(/* pluginOptions */)
  43. ]).process(YOUR_CSS /*, processOptions */);
  44. ```
  45. [PostCSS Nesting] runs in all Node environments, with special instructions for:
  46. | [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
  47. | --- | --- | --- | --- | --- |
  48. [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-nesting.svg
  49. [cli-url]: https://travis-ci.org/jonathantneal/postcss-nesting
  50. [css-img]: https://cssdb.org/badge/nesting-rules.svg
  51. [css-url]: https://cssdb.org/#nesting-rules
  52. [git-img]: https://img.shields.io/badge/support-chat-blue.svg
  53. [git-url]: https://gitter.im/postcss/postcss
  54. [npm-img]: https://img.shields.io/npm/v/postcss-nesting.svg
  55. [npm-url]: https://www.npmjs.com/package/postcss-nesting
  56. [CSS Nesting]: https://drafts.csswg.org/css-nesting-1/
  57. [PostCSS]: https://github.com/postcss/postcss
  58. [PostCSS Nesting]: https://github.com/jonathantneal/postcss-nesting