CSS Next

CSS是一门纯静态的语言，随着项目体积越来越大，暴露出一些问题，包括：

• 无法定义变量
• 选择器过长，不能嵌套
• 无法继承

社区应运而生的出现了一些CSS预处理器，包括：

• sass
• less
• stylus

预处理器只是方便了开发者更好的编写样式，最终要通过webpack各种loader编译回原生的CSS。

CSS NEXT就是下一代的CSS规范。

CSS NEXT规则

1. custom properties & var()

自定义 css 变量，方便复用。

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

1. custom properties set & @apply

自定义一套 css 样式，通过 @apply 复用。

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}

1. reduced calc()

使用计算属性。

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: calc(var(--fontSize) * 2);
}

1. custom media queries

使用自定义媒体查询

/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* your styles */
}

1. custom selectors

使用自定义选择器。

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {
  /* styles for your buttons */
}
:--button:--enter {
  /* hover/focus styles for your button */
  /* Read more about :enter proposal */
  /* http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 */
}

1. nesting

允许使用嵌套选择器

a {
  /* direct nesting (& MUST be the first part of selector)*/
  & span {
    color: white;
  }

  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  }

  /* media query automatic nesting */
  @media (min-width: 30em) {
    color: yellow;
  }
}

1. image-set() function

根据不同的屏幕分辨率，自动使用对应大小的图片。

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