手记

小巧灵活的css变量及与css预编译做法的对比

首先提及一下常用的css预编译语言:sass,less和stylus

  • 共同点:
    • 自己名为编译文件后缀名
      style.less, style.sass,style.styl
  • 不同点:

    • sass和less都属于css的超集,兼容任何css的写法;而stylus不兼容
    • sass变量以$开始
      $fontStack: Helvetica,sans-serif;

    • less 和sass区别仅在于将$变成@

    • stylus比较随意

    fontStack:sans-serif;

需要明确的一点是:使用css预编译比较优雅之处在于支持嵌套 css变量的方法(写代码的一个通用安全的原则是原生优先,既然css支持变量那不妨直接拿来用之)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  :root{
    --title:#f00;
    --text:#0f0;
    --link:#00f;
  };
  h1{
    color:var(--title);
    background:var(--title);
  }
  a{
    background:var(--link);
    color:var(--title);
  }
  p{
    /*支持作用域*/
    --text:#000;
    color:var(--text);
    background:var(--title);
  }
</style>
<body>
<a href="">xxx</a>
  <h1 style='color:var(--title);'>hello</h1>
  <h1>I am just the same</h1>
  <p>world</p>
</body>
</html>

效果:

总结

相较于传统的Sass、Less、Stylus等预处理变量,CSS变量有它的优势:

1.CSS变量直接修改,立即生效,而传统与处理器变量编译后无法直接更改

2.CSS变量能够像CSS本身一样,能够继承,能够组合使用,可以作用需要的地方即作用域

3.配合上JS,可以方便的读写和控制

4.语法上类似CSS和JS,方便快速上手开发,不需要像其它传统预处理变量那样,需要学习各种语法,开发和交接成本低

5.CSS变量本身包换了语义的信息,在CSS文件中能够被识别和理解。

6.当多个媒介查询的时候,重复定义的代码量会成倍增加。因为CSS变量可以传递,当我们使用响应式的时候,我们只需要修改一个CSS属性值即可。下图中我们只需要修改--columns这一个变量即可。

css变量支持的情况

下面是目前浏览器支持的情况,虽然IE依旧不能够支持,但是如果是在移动端,还是可以来尝试一下的,当然如果有兴趣的可以关注一下:cssnext,myth这个两个插件,可以让我们提前使用CSS变量的一些方法:

0人推荐
随时随地看视频
慕课网APP