变量的声明
声明变量的时候,变量名前面要加两根连词线 -- 。
:root {
--color:#000;
--Color:#001;
}
:root伪类可以看做是一个全局作用域,在里面声明的变量,他下面的所有选择器都可以拿到
body {
color : var(--color);
color : var(--Color);
}
使用自定义属性来设置变量名,并使用特定的 var() 来访问,区分大小写
var(--color); var(--Color);是不同的两个
它们与color、font-size等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties)。因为变量与自定义的 CSS 属性其实是一回事。
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
var(--bg, #111)这种情况只存在于没有默认值
其实每个大括号都是一个作用域,内部优先级高于外部变量优先级
:root {
--color:#000;
}
body {
--color:#002;
color : var(--color);
}
//这里用个大佬们的例子,下面每个字的颜色都是按选择器的优先级现实的
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
需要注意的是 CSS 变量并不支持 !important 声明。
var()函数还可以用在变量的声明。
:root {
--color: red;
--bg: var(--color);
}
注意,变量值只能用作属性值,不能用作属性名。
:root { --color: color; var(--color): red; }
这样是不合法的
变量值的类型
- 如果变量值是一个字符串,可以与其他字符串拼接。
--one: '1px'; --border: var(--one)' solid red';
- 如果变量值是数值,不能与数值单位直接连用。
.foo { --top: 20; /* 无效,相当于没有设置 */ margin-top: var(--top)px; }
- 如果变量值带有单位,就不能写成字符串。
.foo { --top: "20px"; /* 无效,相当于没有设置 */ margin-top: var(--top); }
- 数值与单位直接写在一起,可以使用calc()函数,将它们连接,不过要小心兼容问题。
.foo { --top: 20; margin-top: calc(var(--top) * 1px); }
在传统的CSS概念里,属性的有效性(validity)对于自定义属性来讲,并不适用。当自定义属性被解析,浏览器不知道哪里为调用到它们,所以几乎所有的值都是有效的。
不幸的是,这些有效值能通过var()函数操作符来调用,即使在当前上文没有意义。所以属性和自定义的值会导致无效的CSS声明。
- 不能使用CSS自定义属性作为CSS属性名称:var(--side): 10px;
- 不能作为媒体查询值使用:@media screen and (min-width: var(--min-width) {}
- 图片地址,如url(var(--image-url)) ,不会生效
响应式布局
- 一般而言,使用媒体查询的时候,我们需要将要响应式改变的属性全部重新罗列一遍。利用css变量的特点,可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值。在这里它的作用将优于 LESS 和 SASS
:root {
--mainWidth:1000px;
--leftMargin:100px;
}
.main {
width: var(--mainWidth);
margin-left: var(--leftMargin);
}
@media screen and (min-width:1480px) {
:root {
--mainWidth:800px;
--leftMargin:50px;
}
}
兼容性处理
- 别处理了放弃低版本浏览器吧,过。
- 检查是否兼容:说实话我是不想检测兼容的自己试呢反正都是最新的东西,等团队决定要用了兼容问题也不会太严重
a {
color: #7F583F;
color: var(--primary);
}
/* 用属性值得无效声明 */
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
/* 也可以使用@support命令进行检测。 */
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
/* JavaScript 检测浏览器是否支持 CSS 变量。 */
JavaScript 操作
- 这也是css变量一大实用之处
- 读写属性
:root{
--testMargin:75px;
}
var root = getComputedStyle(document.documentElement);
// 读取
var cssVariable = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable); // '75px'
// 写入
root.setProperty('--testMargin', '100px');
// 删除变量
root.removeProperty('--testMargin');
这意味着,JavaScript 可以将任意值存入样式表。
- 网页换肤点击按钮改变CSS变量值
const btn = document.getElementById("button");
const docStyle = document.documentElement.style;
btn.onClick = function(){
docStyle.style.setProperty('--tplColor', 'yellow');
}
- 监听事件,事件信息存入 CSS 变量。
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
作者:gostfather
链接:https://juejin.im/post/59c9af536fb9a00a3e306d73
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。