之前写过一点点 后来又看了 一篇ppt You Might Not Need CSS Preprocessor 讲了一些关于当前预处理解决的痛点以及它们缺点 并给出了使用原生css解决这些痛点的方法 然而大部分方法都还只是标准 甚至有的还是提案 浏览器实现就更少了 不过可以作为展望来期待一下美好的未来吧 算是The Future of CSS

预处理器解决的痛点:

  1. 变量 (CSS Variables)
  2. 混合 (Mixins)
  3. 嵌套 (Nesting)
  4. 模块 (Modules)
  5. 其他: 选择器辅助方法, 颜色函数等 (Selector helpers, color functions)

预处理器的缺点:

  1. 额外配置 (Additional setup)
  2. 需要编译 (Compilation)
  3. 不够标准化的语法 (Not standardized syntax)
  4. 调试困难 (Hard debug)

然后文章告诉你 这些痛点都有原生的解决办法 具体的兼容性可以查看 caniuse或者MDN或者官方标准 这些东西更新太快了 不能保证写本文的时候的标准以后不会变

变量 (CSS Variables)

第一个变量: currentColor 用法很简单 基本上所有现代浏览器都能用了

1
2
3
4
5
div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

更加通用的css变量 CSS Variables 标准

语法

1
2
3
4
/* 定义变量 */
--VAR_NAME: <declaration-value>;
/* 使用 */
var(--VAR_NAME)

使用

1
2
3
4
5
6
7
:root {
    --main-color: #ff00ff;
}

body {
    color: var(--main-color);
}

为啥 css变量要用--foo和var(foo)这样的语法呢 而不用sass或者其他的类似$foo呢 这里有篇文章 Let’s Talk about CSS Variables 相当早的文章 关于制定这个语法的时候 规则制定者们的一些思考

具体的css变量语法各个地方资料都很多 这里就不多讲了

混合 (Mixins)

主要是@apply 这个语法和css变量的有点点相似 @apply 提案

1
2
3
4
5
6
7
8
9
10
:root {
    --pink-schema: {
        color: #6A8759;
        background-color: #F64778;
    }
}

body{
    @apply --pink-schema;
}

和这个功能相似的有个 @extend(继承) 提案

1
2
3
4
5
6
7
8
9
.error {
  color: red;
  border: thick dotted red;
}

.serious-error {
  @extend .error;
  font-weight: bold;
}

嵌套 (Nesting)

和各种预处理也没有大的区别 nesting 提案

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
ul {
  & > li {
    color: #000;

    & > ul { display: none; }

    &:hover {
      color: #f00;

      & > ul { display: block; }
    }
  }
}

还有一个关键字 @nest 必须要结合&使用

1
2
3
4
5
6
.foo {
  color: black;
  @nest body.loading & {
    opacity: 0.5;
  }
}

相当于

1
2
3
4
5
6
.foo {
  color: black;
}
body.loading .foo {
  opacity: 0.5;
}

模块 (Modules)

这个所有浏览器应该都兼容了的 早在ie5.5就可以用了

但是由于浏览器没有实现并行请求 所有的子模块按顺序全部加载 会阻塞其他请求 所以这个语法虽然没有兼容性问题 但是几乎没人用 但是等到HTTP/2普及之后这个情况会有改观 

1
2
3
4
5
6
/* Formal syntax */
@import [ <string> | <url> ] [<media-query-list>]?;

/* example */
@import url("print.css");
@import "mobile.css" (max-width: 728px);

其他

:matches伪类

可以使用css选择器同时选择多个元素 来自Selectors4 标准

1
2
3
4
5
6
7
8
9
10
11
.nav:matches(.side,.top) .links:matches(:hover, :focus) {
    color: #BADA55;
}

/* 等同与 */
.nav.side .links:hover,
.nav.top  .links:hover,
.nav.side .links:focus,
.nav.top  .links:focus {
    color: #BADA55;
}

@custom-selector

自定义选择器 来自CSS Extensions 草案 这个草案非常新鲜 9 February 2017才编辑过的

1
2
3
4
5
6
@custom-selector :--text-inputs input[type="text"], input[type="password"];

:--text-inputs.disabled,
:--text-inputs[disabled] {
    opacity: 0.5
}

这个功能是不是和:matches有点重复

@custom-media

自定义媒体查询 这个语法和@custom-selector如出一辙 mediaqueries 草案

1
2
3
4
5
6
7
@custom-media --tablet (min-width: 800px) and (max-width: 1024px);

@media (--tablet){
    .custom-media-queries{
        background-color: red;
    }
}

Color Function

是一个颜色的扩展类 帮助设置一些颜色什么的 Color Function 

1
2
3
4
5
6
7
8
9
10
11
12
/* syntax */
color( <color> <color-adjuster>* );

/* example */
color(
  red             /* from red */
  blackness(+25%) /* to 25% more black than red */
  blackness(+25%) /* to 50% more black than red */
  blackness(-50%) /* to red again */
  hue(+ 30deg)    /* to orange */
  hue(- 30deg)    /* to red again */
);

现在这些特性肯定不能全部都用上的 如果想用 可以试一下这个 css next 相关的一些新css特性也可以再这里查到