CSS预处理技术

CSS自定义变量

• 这是一个实验中的标准，后续的具体写法和解析可能会有变动。
• 与Less|Sass等预处理器不同的是CSS变量带有语义效果，并且不需要额外的编译。因为其名称本身就包含了语义的信息，这使得CSS 文件变得易读和理解。举个例子，main-text-color比文档中的#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。
• 个人感觉这个方式与C语言的#define有点类似，在解析阶段将所有CSS变量置换成定义好的常量再对指定的css样式进行渲染。
• 最简单的使用方式是在:root伪类中定义好所有的变量，并且在需要使用的时候利用"var(变量，[缺省值])"来使用变量，需要注意的是var()函数置换后的内容后面会自带一个空格。
• 更多详细的使用示例请参考CSS中的自定义变量和MDN CSS VAR。

Polyfills和Ponyfills

• 不同版本的浏览器，能支持的特性是有差异的，就像.net 2.0版本支持不了.net 4.0版本的新特性一样。之所以提到这俩是因为Internet Explorer完全不支持CSS自定义变量，因此需要手动扩展。各版本浏览器支持情况如下图所示：

• Polyfills，国内翻译成“垫片库”，通常用于弥补一些在浏览器中没有被支持的特性，为这些特性提供一套后备的解决方案。例如 ES5 对数组新增了.map和.reduce方法，而一些不支持 ES5 的浏览器却无法使用这些新的方法。为了让这些不支持 ES5 的浏览器仍然可以使用这些方法，于是就有了第三方的垫片库，如es5-shim。

• 与Polyfill 类似，Ponyfill 也用于提供对某些浏览器特性的后备支持，与 Polyfill 类似给浏览器打“补丁”的实现方式，Ponyfill 更像是一个“模块”。Ponyfill 以独立的模块的形式提供对新特性的支持，但不会默认把这些支持“补丁”到浏览器上。

• 下面的方法演示写一个用于支持String.trim的 Polyfill，代码来自 MDN。

  if (!String.prototype.trim) {
      String.prototype.trim = function ()
      {
          return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
      };
  }

具有相同功能的 Ponyfill 实现更像是一个导出下面方法的模块。

  function trim (text) {
      return text.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  }

• 用.Net的特性来看，Polyfills就是我给某个系统基础类型添加一个静态实现方法，如以下代码所示直接给string类添加了一个基础方法，凡是string类型的类在代码提示中就直接多了一个函数，而Ponyfills则是直接写好一个类库，谁引用了该类库，谁就拥有该功能，而没引用的就不会受到影响：

   public static class Extensions
   {
          public static string GetMostFrequentCharacter(this string s)
          {
              //内部实现
          }
   }
  //之后就可以直接调用
  string s = "abacdsfsfad";
  string result = s.GetMostFrequentCharacter();

CSS-Var-Ponyfills

• 本博客也使用了CSS自定义变量，如下图所示：

• 而在IE11中则是完全没有起效，如下所示：

• 因此我们引入CSS-Var-Ponyfills，代码如下所示：

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2">
</script>
<script>
    //When true, the ponyfill will only transform CSS and trigger callbacks in browsers 	that lack native support for CSS custom properties.
    cssVars({ onlyLegacy: true });
</script>

• 更多的参数设置可以参考CSS-Vars-Ponyfills，这里简单介绍一下，onlyLegacy为true的意思是只为不支持CSS原生变量的浏览器进行CSS转换，而支持CSS变量的浏览器则按其自己的定义进行支持。顺带一提设置为false则为所有的浏览器都进行转换。
• 经测试，对行内样式使用CSS变量的话，这个Ponyfills暂时无法进行转换。

Less

Sass

Stylus

工具

Koala

koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译，帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。

参考资料

1. CSS中的自定义变量
2. MDN CSS VAR
3. Polyfills和Ponyfills的区别
4. CSS-Vars-Ponyfills
5. LESS
6. SASS
7. Stylus

结束语

所谓坚持，不是四处寻求安慰后的坚持，不是需求鼓励后的坚持，不是被人说服后的坚持。 而是无论如何，牙碎自己吞，流泪自己擦，摔了站起来继续走。

真正的坚持，和别人永远发生不了关系，全靠自己每日擦拭。 不要逢人便说：请鼓励我，我会坚持下去的。

那不是坚持，是乞讨。