*** css变量的声明 **
变量名前加两根连线词( -- )
body{
--foo:#000;
--bar:#aaa;
}
各种值都可以放入css变量
变量名大小写敏感
*** 变量读取 ***
var()函数
body{
color:var(--foo);
text-decoration-color:var(--bar)
}
var()函数可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值
color:var(--foo,#ccc)
var()函数也可以用在变量的声明
body{
--color:red;
--font:var(--color);
}
注意,变量名只能用作于属性值,不能用于属性名
body{
--side:margin-top;
var(--side):20px; //无效!!!!!
}
*** 变量值的类型 ***
如果变量值是一个字符串,可以与其他字符串拼接
--bar:'hello';
--foo:var(--bar)'world';
body:after{
content:'--screen-category:'var(--screen-category);
}
如果变量值是数值,不能与数值单位直接连用。
.foo{
--gap:20;
margin-top:var(--gap)px; //无效!!!!!
}
数值与单位直接写在一起是无效的。必须使用calc()函数连接
.foo{
--gap:20;
margin-top:calc(var(--gap)*1px)
}
如果变量值带有单位,就不能写成字符串
.foo{
--foo:'20px';
font-size:var(--foo); // 无效!!!!!
}
.foo{
--foo:20px;
font-size:var(--foo); //有效
}
*** 作用域 ***
同一个css变量,可以在多个选择器内声明。读取的时候,优先级最高的声明有效。
<style>
:root{--color:blue;}
div{--color:green};
#alert{--color:red};
*{--color:var(--color)}
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
*** 响应式布局 ***
可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值
body{
--primary:#aaa;
--secondary:#bbb;
}
a{
color:var(--primary);
text-decoration-color:var(--secondary);
}
@media screen and (min-widthL768px){
body{
--primary:#ccc;
--secondary:#ddd;
}
}
*** 兼容处理 ***
对于不支持css变量的浏览器,可以采用下面的写法
a{
color:#111;
color:var(--primary)
}
也可以使用 @support 命令进行检测
@supports((--a:0)){
/*supported*/
}
@supports(not(--a:0)){
/*not supported*/
}
*** JS操作 ***
js也可以检测浏览器是否支持css变量
const isSupported=
window.css &&
window.css.supports &&
window.css.supports('--a',0)
if(isSupported){
/* supported */
}else{
/* not supported */
}
js操作css变量的写法
//设置变量
document.body.style.setProperty('--primary','#aaa');
//读取变量
document.body.style.getPropertyVlaue('--primary').trim();
//删除变量
document.body.style.removeProperty('--primary');
eg:
事件监听,事件信息被存入css变量
const docStyle=document.docuemntElement.style;
document.addEventListener('mousemove',(e)=>{
docStyle.setProperty('--mouse-x',e.clientX);
docStyle.setProperty('--mouse-y',e.clientY);
})
以下代码中,--foo的值在CSS里面是无效语句,但是可以被js读取。这意味着,可以把样式设置在CSS变量中,让js读取
--foo:if(x>5) this.width=10;
变量名前加两根连线词( -- )
body{
--foo:#000;
--bar:#aaa;
}
各种值都可以放入css变量
变量名大小写敏感
*** 变量读取 ***
var()函数
body{
color:var(--foo);
text-decoration-color:var(--bar)
}
var()函数可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值
color:var(--foo,#ccc)
var()函数也可以用在变量的声明
body{
--color:red;
--font:var(--color);
}
注意,变量名只能用作于属性值,不能用于属性名
body{
--side:margin-top;
var(--side):20px; //无效!!!!!
}
*** 变量值的类型 ***
如果变量值是一个字符串,可以与其他字符串拼接
--bar:'hello';
--foo:var(--bar)'world';
body:after{
content:'--screen-category:'var(--screen-category);
}
如果变量值是数值,不能与数值单位直接连用。
.foo{
--gap:20;
margin-top:var(--gap)px; //无效!!!!!
}
数值与单位直接写在一起是无效的。必须使用calc()函数连接
.foo{
--gap:20;
margin-top:calc(var(--gap)*1px)
}
如果变量值带有单位,就不能写成字符串
.foo{
--foo:'20px';
font-size:var(--foo); // 无效!!!!!
}
.foo{
--foo:20px;
font-size:var(--foo); //有效
}
*** 作用域 ***
同一个css变量,可以在多个选择器内声明。读取的时候,优先级最高的声明有效。
<style>
:root{--color:blue;}
div{--color:green};
#alert{--color:red};
*{--color:var(--color)}
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
*** 响应式布局 ***
可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值
body{
--primary:#aaa;
--secondary:#bbb;
}
a{
color:var(--primary);
text-decoration-color:var(--secondary);
}
@media screen and (min-widthL768px){
body{
--primary:#ccc;
--secondary:#ddd;
}
}
*** 兼容处理 ***
对于不支持css变量的浏览器,可以采用下面的写法
a{
color:#111;
color:var(--primary)
}
也可以使用 @support 命令进行检测
@supports((--a:0)){
/*supported*/
}
@supports(not(--a:0)){
/*not supported*/
}
*** JS操作 ***
js也可以检测浏览器是否支持css变量
const isSupported=
window.css &&
window.css.supports &&
window.css.supports('--a',0)
if(isSupported){
/* supported */
}else{
/* not supported */
}
js操作css变量的写法
//设置变量
document.body.style.setProperty('--primary','#aaa');
//读取变量
document.body.style.getPropertyVlaue('--primary').trim();
//删除变量
document.body.style.removeProperty('--primary');
eg:
事件监听,事件信息被存入css变量
const docStyle=document.docuemntElement.style;
document.addEventListener('mousemove',(e)=>{
docStyle.setProperty('--mouse-x',e.clientX);
docStyle.setProperty('--mouse-y',e.clientY);
})
以下代码中,--foo的值在CSS里面是无效语句,但是可以被js读取。这意味着,可以把样式设置在CSS变量中,让js读取
--foo:if(x>5) this.width=10;