postcss-cssnext篇

postcss-cssnext目录

  1. 变量命名
  2. 扩展和类占位符
  3. 自定义媒体查询
  4. 自定义选择器
  5. 嵌套规则
  6. rgb() 函数
  7. color() 函数
  8. hwb() 函数
  9. gray() 函数
  10. css filter
  11. :matches伪类
  12. :not伪类
  13. initial 属性复位
  14. font-family

变量命名

:root{
  --color: red;
}
a {
  color: var(--color);
}

GitHub to postcss-custom-properties: 定义变量只能在 :root 内;

扩展和类占位符

:root{
  --links: {
    color: #00b0ff;
    cursor: pointer;
  }
}
.submit{
  @apply --links;
}

GitHub to postcss-apply

自定义媒体查询

简单查询

// 方式一:
@media (max-width: 500px) {/*your styles*/}
// 方式二:
@custom-media --small-viewport (max-width: 500px);
@media (--small-viewport) {/*your styles*/}

GitHub to postcss-custom-media

范围查询

// 方式一:
@media (500px <= width <= 1200px) {/*your style*/}
// 方式二:
@custom-media --small-viewport (500px <= width <= 1000px);
@media (--small-viewport) {/*your styles*/}
// 方式三:
@custom-media --small-viewport (width >= 500px) and (width <= 1200px);
@media (--small-viewport) {/*your styles*/}

GitHub to postcss-media-minmax

自定义选择器

@custom-selector :--heading h1, h2, h3, h4;
@custom-selector :--any-link :link, :visited;

.demo :--heading, a:--any-link {
  font-size: 32px;
}

GitHub to postcss-custom-selectors

嵌套规则

.title {
  & h1{
    font-size: 20px;
  }
  // .title h1 {...}

  .button{
    cursor: pointer;
    @nest .header & {
      color: red;
    }
  }
  // .title .header .button {...}

  & .container{
    @nest .header & {
      color: red;
    }
  }
  // .header .title .container {...}
}

GitHub to postcss-nesting: @nest 为复杂嵌套而生,首先它的嵌套规则和 & 息息相关

  • 如上例.button 没有将 .title所代表的& 传递下去,@next 只能寻找到 .button 就终止寻找了。所以它的嵌套依旧在 .title 内.
  • .container.title 传递下去使.header能寻找到最外面一层,从而跳出了嵌套.

rgb() 函数

div {
  background-color: rgb(100 222.2 100.9 / 30%);
}
// div { background-color: rgba(100, 222, 101, .3); }

当不需要兼容低版本IE时推荐使用 rgb(), 否则请使用 rgba()

color() 函数

函数参数:

1. [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
2. [red( | green( | blue( | alpha( | a(] '*' <percentage> )
3. rgb( ['+' | '-'] [<number> | <percentage>]{3} ) @todo
4. rgb( ['+' | '-'] <hash-token> ) @todo
5. rgb( '*' <percentage> ) | @todo
6. [hue( | h(] ['+' | '-' | '*']? <angle> )
7. [saturation( | s(] ['+' | '-' | '*']? <percentage> )
8. [lightness( | l(] ['+' | '-' | '*']? <percentage> )
9. [whiteness( | w(] ['+' | '-' | '*']? <percentage> )
10. [blackness( | b(] ['+' | '-' | '*']? <percentage> )
11. tint( <percentage> )
12. shade( <percentage> )
13. blend( <color> <percentage> [rgb | hsl | hwb]? )
14. blenda( <color> <percentage> [rgb | hsl | hwb]? ) @todo
15. contrast( <percentage>? )

例子:

body {
  background: color(red a(.9));
  // background-color: rgba(255, 0, 0, 0.9);
}

GitHub to postcss-color-function

hwb() 函数

body {
  color: hwb(90, 0%, 0%, 0.5);
}
// body { color: rgba(128, 255, 0, .5); }

GitHub to postcss-color-hwb

gray() 函数

.foo {
  color: gray(0);
}
// .foo { color: rgb(0, 0, 0); }

.bar {
  color: gray(255, 50%);
}
// .bar { color: rgb(255, 255, 255, .5); }

.baz {
  color: gray;
}
// .baz { color: gray; }

GitHub to postcss-color-gray

css filter

10个 CSS 过滤器

1. grayscale
2. sepia
3. saturate
4. hue-rotate
5. invert
6. opacity
7. brightness
8. contrast
9. blur
10. drop-shadow
.blur {
    filter: blur(4px);
}

如兼容低版本IE请参考下方 GitHub 源地址

:matches伪类

简单选择器

p:matches(:first-child, .special) {
  color: red;
}
// p:first-child, p.special { color: red; }

GitHub to postcss-selector-matches

:not伪类

过滤选择器

p:not(:first-child, .special) {
  color: red;
}
// p:not(:first-child), p:not(.special) { color: red; }

GitHub to postcss-selector-NOT

initial 属性复位

div {
  display: initial;
}

// 杀手锏
div {
  all: initial; /* 初始化所有属性 */
}

GitHub to postcss-initial

font-family

body {
  font-family: system-ui;
}
// body{ font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; }

GitHub to postcss-font-family-system-ui

总结

此文大致列举出大部分常用的方法,还有其他针对性的方法可自行查阅文档。

官方文档:cssnext