postcss-cssnext

使用未来的 CSS 特性(包括autoprefixer)

使用文档

1.浏览器前缀自动添加

autoprefixer

2.自定义属性[var()]

:root {
    --mRed: red;
}
#app {
    color: var(--mRed);
}

3.自定义属性集[@apply]

:root {
    --s-app: {
      color: white;
      background-color: red;
    };
}
#app {
    @apply --s-app;
}

4.计算[calc()]

:root {
    --font-size: 12px;
}
#app {
    font-size: calc(var(--font-size) * 3);
}

5.查询[@custom-media,@media]

@custom-media --cm-min (max-width: 600px);
@media (--cm-min) {
    #app {
        font-size: 36px;
    }
}

6.范围查询[@custom-media,@media]

@custom-media --cm-r1 (width >= 600px) and (width <= 700px);
@media (--cm-r1) {
    #app {
        font-size: 36px;
    }
}

7.自定义选择器[@custom-selector]

@custom-selector :--id-app #app;   //[#app,...]
@custom-selector :--enter :hover;   //[:hover,...]

:--id-app {
    color: red;
}
:--id-app:--enter {
    color: green;
}

8.嵌套选择器[]

html:

<div class="c1">
    <span class="c2">hello1</span>
    <div>hello2</div>
    <div class="c2">hello3
        <span class="c3">hello4</span>
        <div>hello5</div>
    </div>
</div>

css:

@custom-media --cm-min (max-width: 600px);
.c2 {
    color: white;
    &.c2 {
        color: green;
        & > .c3 {
            color: blue;
            & + div {
                color: blue;
            }
        }
    }
    @nest .c1 > :not(&) {
        color: red;
    }
    @media (--cm-min) {
        @nest .c1 > :not(&) {
            color: yellow;
        }
    }
}

9.image-set()

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

10.color()

aqua(水绿), black(纯黑), blue(纯蓝), fuchsia(紫红), gray(灰色), green(纯绿), lime(酸橙), maroon(栗色), navy(海军蓝), olive(橄榄), orange(橙色), purple(紫色), red(纯红), silver(银白色), teal(水鸭色), white(纯白), yellow(纯黄)

.c1 {
    & .c2_1 {
        color: color(green a(70%));
    }
    & .c2_2 {
        color: color(green b(60%));
    }
}

11.filter属性

grayscale(灰度0%-100%),sepia(深褐色0%-100%+),saturate(饱和度0%-100%+),hue-rotate(色相旋转0deg-360deg),invert(反转输入图像0%-100%),opacity(透明程度0%-100%),brightness(更亮或更暗0%-100%+),contrast(对比度0%-100%+),blur(高斯模糊),drop-shadow(阴影效果2px 2px 3px red)

.c1 {
    filter: blur(1px) opacity(90%);
}

12.initial

.c1 {
    all: initial;
}

13.rem

html {
    font-size: 100%;
}
.c1 {
    font-size: 1.2rem;
}

14. :any-link

.c1 :any-link {
    color: green;
}

15. :matches

.c1 a:matches(.c2_1,.c2_2) {
    color: green;
}

16. :not

.c1 a:not(.c2_1,.c2_2) {
    color: green;
}

17. ::

.c1::before {
  content: 'bf:'
}

18.overflow-wrap

body {
  overflow-wrap: break-word;
}

19.system-ui

body {
  font-family: system-ui;
}