postcss插件学习总结

谢善

2023-12-01

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。

array.filter(Boolean)
原来它等价于：
array.filter((item) => {return Boolean(item)})
也就是说这样写的意思就是去除数组中为“假”的元素。
0、undefined、null、NaN、''、false

1.post-cssnext支持的语法

css4语法：

1.1 自定义属性

相当于一个变量，变量的好处显而易见，重复使用

1 . 定义

在 :root 选择器定义一个css属性

:root{
    --mianColor:#ffc001;
}

2 . 使用

使用 var(xx) 调用自定义属性

.test{
    background: var(--mianColor);
}

/*编译后*/
.test{
    background: #ffc001;
}

1.2自定义属性集 @apply

一个变量里存了多个属性

定义

在 :root 选择器定义一个css属性集
:

root{
    --fontCommon:{
        font-size:14px;
        fontfamily: 微软雅黑;
    };
}

使用

使用 @apply xx 调用属性集


.test{
    @apply --fontCommon;
}

/*编译后*/
.test{
  font-size:14px;
  font-family: 微软雅黑;
}

1.3 选择器嵌套（&，@nest）

1 . 直接嵌套

语法 &
.

test {
    & span {
        color: white;
    }
}

/*编译后*/
.test span {
    color: white;
}

2 . 指定如何嵌套

语法：@nest … & …,&指定位置

a {
    @nest span & {
        color: blue;
    }
}

/*编译后*/
span a {
  color: blue;
}

3 . 自动嵌套（媒体查询中）

媒体查询中自动嵌套到内部

.test {
    @media (min-width: 30rem) {
        color: yellow;
   }
}

/*编译后*/
@media (min-width: 30rem) {
    .test {
        color: yellow;
    }
}

1.4 自定义选择器（@custome-selector）

/* custom properties */
:root {
  --heading-color: #ff0000;
}

/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/* usage */
:--headings { 
  color: var(--heading-color);
}

变成：

h1,
h2,
h3,
h4,
h5,
h6 { 
  color: #ff0000;
}

1.5 image-set()：为不同分辨率的屏幕设置不同的像素

.foo {
  background-image: image-set(
    url(img/test.png) 1x,
    url(img/test-2x.png) 2x,
    url(my-img-print.png) 600dpi
  );
}

/* 转换之后 */
.foo {
  background-image: url(img/test.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .foo {
    background-image: url(img/test-2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
  .foo {
    background-image: url(my-img-print.png);
  }
}

关于postcss就是postcss插件的相关学习

2. postcss-loader(css预处理器)

其实跟babel-loader很像，只不过一个是用来处理js的，一个是用来处理css的，先把css文件转成AST,然后通过各种插件改变AST的结构生成新的AST，最后生成新的css。

3. postcss-import（@import）

https://www.npmjs.com/package/postcss-import

使用postcss-import插件，遵循@import规则，你可以将reset.css样式合并到你的主样式表中，减少http请求。

@import 'reset.css';

4. autoprefixer（自动给属性加需要兼容浏览器的前缀）

http://autoprefixer.github.io/

兼容不同的浏览器，给一些css属性自动加前缀

.example {
    transition: all .5s;
}

转换成：

.example {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

5. postcss-cssnext（可以使用最新的css而不用考虑浏览器是否支持的问题）

可以提前使用一些最新的css，这样就不用考虑浏览器是否支持该css新属性的问题。

6. postcss-nested(css嵌套)

https://www.npmjs.com/package/postcss-nested

可以支持css嵌套

.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
  }
}

转换成：
.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
}

7.postcss-nesting（css组合嵌套）

https://www.npmjs.com/package/postcss-nesting

css规则互相嵌套

a, b {
  color: red;

  & c, & d {
    color: white;
  }
}

/* becomes */

a, b {
  color: red;
}

a c, a d, b c, b d {
  color: white;
}
# 7. postcss-atroot（@at-root）

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

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

转换成

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

9. postcss-each （@each）

https://www.npmjs.com/package/postcss-each

@each $icon in foo, bar, baz {
  .icon-$(icon) {
    background: url('icons/$(icon).png');
  }
}

.icon-foo {
  background: url('icons/foo.png');
}

.icon-bar {
  background: url('icons/bar.png');
}

.icon-baz {
  background: url('icons/baz.png');
}

10. postcss-extend-rule（@extend）

%thick-border {
  border: thick dotted red;
}

.serious-modal {
  font-style: normal;
  font-weight: bold;

  @media (max-width: 240px) {
    @extend .modal:hover;
  }
}

.modal {
  @extend %thick-border;

  color: red;
}

.modal:hover:not(:focus) {
  outline: none;
}

/* becomes */

.serious-modal {
  font-style: normal;
  font-weight: bold;
}

@media (max-width: 240px) {
  .serious-modal:not(:focus) {
    outline: none;
  }
}

.modal {
  border: thick dotted red;
  color: red;
}

.modal:hover:not(:focus) {
  outline: none;
}

11. postcss-for（@for）

https://www.npmjs.com/package/postcss-for

@for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}


.b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}

12. postcss-conditionals（@if，@esle）

https://github.com/andyjansson/postcss-conditionals

.foo {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

you will get:


.foo {
  background: green;
}

12.postcss-apply(@apply)

https://www.npmjs.com/package/postcss-apply

/* input */
 
:root {
  --toolbar-theme: {
    background-color: rebeccapurple;
    color: white;
    border: 1px solid green;
  };
}
 
.Toolbar {
  @apply --toolbar-theme;
}


/* output */
 
.Toolbar {
  background-color: rebeccapurple;
  color: white;
  border: 1px solid green;
}

13. postcss-mixins(@define-mixin, @mixin)

@define-mixin icon $network, $color: blue {
    .icon.is-$(network) {
        color: $color;
        @mixin-content;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter {
    background: url(twt.png);
}
@mixin icon youtube, red {
    background: url(youtube.png);
}


.icon.is-twitter {
    color: blue;
    background: url(twt.png);
}
.icon.is-twitter:hover {
    color: white;
    background: blue;
}
.icon.is-youtube {
    color: red;
    background: url(youtube.png);
}
.icon.is-youtube:hover {
    color: white;
    background: red;
}

15. postcss-at-rules-variables()

https://github.com/Scrum/postcss-at-rules-variables

.some-class {
    color: #fff;

    @for $val from 1 to 3 {
        @if $val != 2 {
            .icon-$val {
                background-position: 0 $(val)px;
            }
        }
    }
}

.some-class {
    color: #fff;
}

.some-class .icon-1 {
    background-position: 0 1px;
}

.some-class .icon-3 {
    background-position: 0 3px;
}

16. postcss-custom-properties（处理在:root中定义的变量）

https://www.npmjs.com/package/postcss-custom-properties

:root {
  --color: red;
}

h1 {
  color: var(--color);
}

/* becomes */

:root {
  --color: red;
}

h1 {
  color: red;
  color: var(--color);
}

17. postcss-simple-grid

18. postcss-simple-vars（像sass一样定义变量）

https://www.npmjs.com/package/postcss-simple-vars

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
  background: $blue;
  width: $column;
}
.menu {
  width: calc(4 * $column);
  margin-$(dir): 10px;
}

.menu_link {
  background: #056ef0;
  width: 200px;
}
.menu {
  width: calc(4 * 200px);
  margin-top: 10px;
}

19. postcss-url

20. postcss-will-change

21. cssnano

cssnano会压缩您CSS文件，以确保下载在您的生产环境中尽可能小。

postcss插件学习总结

1.post-cssnext支持的语法

1.1 自定义属性

1.2自定义属性集 @apply

1.3 选择器嵌套（&，@nest）

1.4 自定义选择器（@custome-selector）

1.5 image-set()：为不同分辨率的屏幕设置不同的像素

2. postcss-loader(css预处理器)

3. postcss-import（@import）

4. autoprefixer（自动给属性加需要兼容浏览器的前缀）

5. postcss-cssnext（可以使用最新的css而不用考虑浏览器是否支持的问题）

6. postcss-nested(css嵌套)

7.postcss-nesting（css组合嵌套）

9. postcss-each （@each）

10. postcss-extend-rule（@extend）

11. postcss-for（@for）

12. postcss-conditionals（@if，@esle）

12.postcss-apply(@apply)

13. postcss-mixins(@define-mixin, @mixin)

15. postcss-at-rules-variables()

16. postcss-custom-properties（处理在:root中定义的变量）

17. postcss-simple-grid

18. postcss-simple-vars（像sass一样定义变量）

19. postcss-url

20. postcss-will-change

21. cssnano

相关阅读

相关文章

相关问答

相关文档

postcss插件学习总结

1.post-cssnext支持的语法

1.1 自定义属性

1.2自定义属性集 @apply

1.3 选择器嵌套 （&，@nest）

1.4 自定义选择器（@custome-selector）

1.5 image-set()：为不同分辨率的屏幕设置不同的像素

2. postcss-loader(css预处理器)

3. postcss-import（@import）

4. autoprefixer（自动给属性加需要兼容浏览器的前缀）

5. postcss-cssnext（可以使用最新的css而不用考虑浏览器是否支持的问题）

6. postcss-nested(css嵌套)

7.postcss-nesting（css组合嵌套）

9. postcss-each （@each）

10. postcss-extend-rule（@extend）

11. postcss-for（@for）

12. postcss-conditionals（@if，@esle）

12.postcss-apply(@apply)

13. postcss-mixins(@define-mixin, @mixin)

15. postcss-at-rules-variables()

16. postcss-custom-properties（处理在:root中定义的变量）

17. postcss-simple-grid

18. postcss-simple-vars（像sass一样定义变量）

19. postcss-url

20. postcss-will-change

21. cssnano

相关阅读

相关文章

相关问答

相关文档

1.3 选择器嵌套（&，@nest）