Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS中的变量 var() 与 --varname

  最新的CSS规范中提供了变量的支持,只是现在功能还比较弱,只支持存储一些简单的引用数据,而且目前只有Firefox支持。不过对于一些基础问题的解决还是有点帮助的。而且变量的引入确实是CSS的一大进步,也许将来CSS会提供更强大的支持。
  在很多选择器都使用同一条CSS规则时,我们可能会把这些选择器一起提取出来,使用分组选择器来应用这条规则。这样的缺点是把选择器写了两遍,当选择器本身需要修改时我们需要修改两个地方,耦合度增加了。 <style>
.a,.b,.c {font-family:Arial;}
.a {color:red;}
.b {color:green;}
.c {color:blue;}
</style>
<p><span>A:</span><span class="a">a</span>
<p><span>A:</span><span class="a">a</span>
<p><span>A:</span><span class="a">a</span>
<p><span>B:</span><span class="b">b</span>
<p><span>C:</span><span class="c">c</span>
  另一种做法是添加一个全局的类选择器来整合这个公共样式,但这需要浪费一个全局的选择器名称,而且要在HTML中的多个class里面重复书写这个类名,修改时同样会遇到各种麻烦。
<style>
.common-font {font-family:Arial;}
.a {color:red;}
.b {color:green;}
.c {color:blue;}
</style>
<p><span>A:</span><span class="a common-font">a</span>
<p><span>A:</span><span class="a common-font">a</span>
<p><span>A:</span><span class="a common-font">a</span>
<p><span>B:</span><span class="b common-font">b</span>
<p><span>C:</span><span class="c common-font">c</span>
  此时时候变量可以稍微解决这种问题。把一些公共使用的值放入变量中,在具体的选择器样式中使用这些变量。
<!--Firefox Only-->
<style>
:root {--font:Arial;}
.a {color:red;font-family:var(--font);}
.b {color:green;font-family:var(--font);}
.c {color:blue;font-family:var(--font);}
</style>
<p><span>A:</span><span class="a">a</span>
<p><span>A:</span><span class="a">a</span>
<p><span>A:</span><span class="a">a</span>
<p><span>B:</span><span class="b">b</span>
<p><span>C:</span><span class="c">c</span>
  当然,变量并不是这个问题的最佳解决方案,但在没有继承和混合的情况下,我认为变量已经是目前的最佳解决方案了。
  其实碍于CSS这种语言的特性(没有循环和分支语句),它所提供的变量在概念上有点类似于宏。虽然也可以通过calc来计算,但它的结果和普通的CSS计算方式是一样的。比如上面的例子是因为在:root中定义的变量,所以全局都有效。如果只为.a选择器定义这个变量的话那么只有.a中的引用才会生效,而且当重复定义时同样遵循层叠规则。
  最后值得一提的是,把变量传递给属性总是传递一个引用。这意味着即使在CSS已经解析之后再修改变量的值,之前使用了该变量的属性也会被修改。这可以通过下面这段代码来验证: <!--Firefox Only-->
<input type="button" style="width:var(--w);" value="--w:200px" />
<script>
document.querySelector("input").onclick=function(){
console.log(document.head.insertAdjacentHTML);
  document.head.insertAdjacentHTML("beforeend",'\
    <style>:root {--w:200px;}</style>\
  ');
};
</script>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^