postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it

MIT 39 个版本

postcss css postcss-plugin sass nested

主页

仓库

提交 Issue

安装

npm install postcss-nested

yarn add postcss-nested

pnpm add postcss-nested

bun add postcss-nested

README

PostCSS Nested

PostCSS plugin to unwrap nested rules closer to Sass syntax.

.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}

.title {
  font-size: var(--font);

  @at-root html {
    --font: 16px;
  }
}

will be processed to:

.phone_title {
  width: 500px;
}
@media (max-width: 500px) {
  .phone_title {
    width: auto;
  }
}
body.is_dark .phone_title {
  color: white;
}
.phone img {
  display: block;
}

.title {
  font-size: var(--font);
}
html {
  --font: 16px;
}

Related plugins:

Use postcss-current-selector after this plugin if you want to use current selector in properties or variables values.
Use postcss-nested-ancestors before this plugin if you want to reference any ancestor element directly in your selectors with ^&.

Alternatives:

See also postcss-nesting, which implements CSSWG draft.
postcss-nested-props for nested properties like font-size.

Docs

Read full docs here.

版本列表

7.0.2 2024-11-01

7.0.1 2024-10-31

7.0.0 2024-10-29

6.2.0 2024-07-19

6.0.1 2023-02-19

6.0.0 2022-10-06

5.0.6 2021-07-28

5.0.5 2021-03-05

5.0.4 2021-02-26

5.0.3 2020-12-08

5.0.2 2020-12-03

5.0.1 2020-09-27

5.0.0 2020-09-15

4.2.3 2020-07-09

4.2.2 2020-07-04

4.2.1 2019-11-06

4.2.0 2019-11-05

4.1.2 2019-02-25

4.1.1 2018-12-14

4.1.0 2018-09-09

4.0.0 2018-09-07

3.0.0 2017-12-11

2.1.2 2017-08-15

2.1.1 2017-08-12

2.1.0 2017-07-25

2.0.4 2017-07-15

2.0.3 2017-07-13

2.0.2 2017-05-09

2.0.1 2017-05-08

2.0.0 2017-05-08

1.0.1 2017-04-13

1.0.0 2015-08-23

0.3.2 2015-05-29

0.3.1 2015-05-09

0.3.0 2015-05-09

0.2.2 2015-02-25

0.2.1 2015-02-02

0.2.0 2014-12-30

0.1.0 2014-11-11