css值变量吗,css变量初体验 -尊龙游戏旗舰厅官网

根据mozilla软件工程师cameron mccormack的透露，火狐浏览器从v29版开始支持一种新的css特征——css变量。下面这个视频可以让你大概的了解一下css变量的基本情况：

css变量定义通过在变量名前加var-前缀实现，引用时使用var()获取变量值。例如：

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

关注html5, css3, web前端技术

这里定义了两个css变量，分别是companyblue和lighterblue，变量的应用范围是document的根节点，使用效果如下：

css变量是有应用范围的，这就是说，你可以覆盖它们：

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

}

.partnerbadge {

var-companyblue: #036;

var-lighterblue: #cfc;

}

h1 {

color: var(companyblue);

}

h2 {

color: var(lighterblue);

}

关注html5, css3, web前端技术

关注html5, css3, web前端技术

这样定义后，在.partnerbadge类下的h1和h2就变成了另外一种蓝色：

css变量可以赋予任何值，可以像使用任何其它值一样使用它们，例如，你可以把它们放到calc()计算表达式里。css变量值可以重新赋值，比如，在不同的media query里赋不同的值。下面是一些使用场景的例子。

:root {

var-companyblue: #369;

var-lighterblue: powderblue;

var-largemargin: 20px;

var-smallmargin: calc(var(largemargin) / 2);

var-borderstyle: 5px solid #000;

var-headersize: 24px;

}

.partnerbadge {

var-companyblue: #036;

var-lighterblue: #369;

var-headersize: calc(var(headersize)/2);

transition: 0.5s;

}

@media (max-width: 400px) {

.partnerbadge {

var-borderstyle: none;

background: #eee;

}

}

/* applying the variables */

body {font-family: 'open sans', sans-serif;}

h1 {

color: var(companyblue);

margin: var(largemargin) 0;

font-size: var(headersize);

}

h2 {

color: var(lighterblue);

margin: var(smallmargin) 0;

font-size: calc(var(headersize) - 5px);

}

.partnerbadge {

padding: var(smallmargin) 10px;

border: var(borderstyle);

}

根据上面的css定义，当浏览器窗口小于400px时，mediaquery就会发生作用，里面的css变量值发生变化。

css变量这个新的css功能是在火狐aurora版里第一次出现，也只是实现了基本功能。在这项功能真正的出现在正式发布版前，还有不少的css3规范里规定的内容要实现。cameron对这些有一个比较详细的说明：

按照css3规范，火狐里还没有实现的部分是cssvariablemap，它是一个对象，功能很像javascript里的map，有get，set等其它方法，使用这些方法能从css样式声明中获取变量的值。需要注意的是，你仍有可以使用getpropertyvalue和setproperty等方法从dom值获取这些变量，但需要使用完整名称，例如var-theme-colour-1。

试一试css变量吧，使用最新的火狐nightly版就可以体验上面的这些代码演示的新功能。

总结

以上是尊龙游戏旗舰厅官网为你收集整理的css值变量吗,css变量初体验的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。