Css变量过程

css于javascript的通信：

2017年 4月份 今年三月，微软宣布 Edge 浏览器将支持 CSS 变量。

变量的声明：

Body{

—foo:#f00;

—bar:43px;

}

又叫做css自定义属性 

(1) 用 - - 两个连词线 因为$foo 被 sass 用掉了， @foo 被Less 用掉了 ，为了不产生冲突，官方的css 变量久变用两根连词线 了。

各种值都可以放入css变量

:root{

--main-color: #4d4e53;

  --main-bg: rgb(255, 255, 255);

  --logo-border-color: rebeccapurple;

 

  --header-height: 68px;

  --content-padding: 10px 20px;

 

  --base-line-height: 1.428571429;

  --transition-duration: .35s;

  --external-link: "external link";

  --margin-top: calc(2vh + 20px);

}

(2) 用 var() 函数读取变量

a{
color:var(—foo);

text-decoration-color:var(—bar)
}

var() 函数还可以使用第二个参数，表示变量的默认值，如果改变量不存在，就会使用这个默认值

Color: var(—foo,#f00);

 

（3） javascript于css通信

设置变量

Document.body.style.setProperty(‘—primary’,’—#f00’);

读取变量

document.body.style.getPropertyValue(‘—primary’).trim();

删除变量

Document.body.style.removeProperty(‘—primary’)

 

参考链接：http://www.ruanyifeng.com/blog/2017/05/css-variables.html