面向未来的 CSS Variable

CSS Variable 即CSS变量,聊CSS变量之前,我想先来说说Sass和Less,还有Stylus,它们都是目前使用较为普遍的三款CSS预处理框架,我们为什么要使用它们呢,因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧,这些框架对于这种CSS预处理的技术已经非常成熟,可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。

三大编译语言的方法

首先他们不约而同的都将自己的名称做为编译文件的后缀名,分别是:

由于Sass和Less都使用的是标准的CSS语法,和Stylus有所不同,它们分别支持以下几种语法

它们的变量使用方法也有不太一样的地方:

以上三种框架编译后的写法,都会得到以下相同的样式:

其次就是嵌套方式,有时候我们的类名会引入非常多的父级元素,这样冗余的代码,不仅没有提升可读性,而且增加代码的体积:

如果使用CSS预处理,就可以少些重复的类名,代码结构层次清晰,显得会比较优雅:

css变量的方法

那么CSS变量这边的情况又是如何?关于变量,其实不外乎定义和使用,我们可以通过这样一个简单的例子来了解,例如:

CSS:

HTML:

这里定义了三个变量,title、link、text,变量的应用范围是整个document,实际效果如下:

当然CSS变量也是有应用范围的,这就是说,你可以覆盖它们,因为变量的声明和使用遵循了CSS的层叠特性,类似于普通编程语言中的变量作用域:

CSS:

这样定义后,p就变成另外一种颜色(黑色):

CSS变量还可以赋予任何值,例如,你可以把它们放到calc()计算表达式里。这样可以在不同的情况下对CSS变量重新赋值,比如,在不同的media query里赋不同的值。下面是一些使用场景的例子:

CSS:

根据上面的CSS定义,当浏览器窗口小于等于640px时,media query就会发生作用,里面的CSS变量值发生变化。

CSS变量的用途

在我们构建站点的时候,通常为了站点的可维护性,例如使用换肤,或者某一种配色方案,当中的文字颜色、字体大小、背景色等等会在页面中多次出现,并被重复使用,当你需要修改的时候,不论是调整配色还是文字大小,都可以通过之前设置好的CSS变量来直接修改。

那么为什么我要使用CSS变量呢

相较于传统的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变量的一些方法:

总结

总的来说,CSS变量还是能够针对性的解决一些项目中的实际问题:

比如一个站点的配色,如果只是几个常用的颜色被应用到多个地方,我们完全可以通过CSS变量来轻松修改,并不需要用到Less、Sass、Stylus这样"复杂"的编译系统。

在响应式代码中不需要重复声明变量,在Less和Sass中也没办法做到像CSS变量那样简洁优雅的代码。

最后,写这篇文章并不是想说CSS变量要取代谁和谁,而是,我们在开发过程中,应该思考自己需要通过工具解决某个实际存存在的问题!

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2017-03-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

从数据到代码——通过代码生成机制实现强类型编程[上篇]

我不知道大家对CodeDOM的代码生成机制是否熟悉,但是有一点可以确定:如果你使用过Visual Studio,你就应该体验过它带给我们在编程上的便利。随便列举...

1559
来自专栏极客编程

Sass 快速入门学习

  众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。

531
来自专栏数据结构与算法

洛谷P1311 选择客栈

题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号。每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),...

3759
来自专栏前端布道

为什么是link-visited-hover-active

前言 通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的...

3315
来自专栏听雨堂

自适应页面高度

      困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不...

1997
来自专栏郭霖

巧用Android网络通信技术,在网络上直接传输对象

要做一个优秀的Android应用,使用到网络通信技术是必不可少的,很难想象一款没有网络交互的软件最终能发展得多成功。那么我们来看一下,一般Android应用程序...

2056
来自专栏狮乐园

HTML is about meaning

HTML标签本身的意义是为了传递对于一个document元素的含义,所以再考虑使用正确的标签表达内容之前,考虑你的网页看起来怎么样为时过早,请将注意力集中到每一...

783
来自专栏数据小魔方

Xcelsius(水晶易表)系列8——动态选择器高级用法

今天继续跟大家分享关于水晶易表的动态选择器高级用法。 该案例所用到的函数和选择器工具还是我们之前用到的基本选择工具——单选按钮,组合框。 用到的思想与昨天讲到的...

2716
来自专栏JackieZheng

初探JavaScript(三)——JS带我"碰壁"带我飞

  已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入。...

1857
来自专栏iKcamp

翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 第 10 章:异步的函数式(下)...

1805

扫码关注云+社区