css variables

2021-08-06 22:00:16 阅读：203 来源： 互联网

标签：-- variables color var font css size

。

css中variables：css变量

平时没少用sass、less、stylus预编译语言，里面的变量很常见，但都需要前把变量都以静态的方式定义好才能使用，然后编译完后生效，无法和js交互。

variables提供了css与js交互的机会！

一、css变量的定义及使用方式：

/* 
    定义：--开头  有作用域
    */
:root{
    --color1:red;
    --color2:green;
}
.box{
    width:100px;
    height:100px;
}
/* 
    使用：var(css变量)
*/
.box1{
    background-color: var(--color1);
}
.box2{
    background-color: var(--color2);
}

效果：

响应式：

div {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  .mediabox {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

默认值：

var(变量,默认值)

background-color: var(--color1,blue);

设置变量数值：

这样是错误的：

--size: 30;   
font-size: var(--size)px;//不生效

正确方式：

--size: 30px;   
font-size: var(--size);//生效

可以用calc计算：

--size: 30;   
font-size: calc(var(--size) * 1px);//生效

如果变量值带有单位，就不能写成字符串：

/* 无效 */
.divbox {
    --size: '30px';
    font-size: var(--size);
}

/* 有效 */
.divbox {
    --size: 30px;
    font-size: var(--size);
}

图片地址，如url(var(--image-url)) ，不会生效

兼容性处理：

css：

/*css*/

@supports ( (--a: 0)) {
    /* supported */
　　.box{xxx:xxx}

}

@supports ( not (--a: 0)) {
    /* not supported */
}

js:

// Js

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
    console.log('CSS properties are supported');
} else {
    console.log('CSS properties are NOT supported');
}

js操作变量：

//读取
let computedStyle = getComputedStyle(document.getElementById("box"));
console.log(computedStyle.getPropertyValue('--bg'));//red
// 写入
document.getElementById("box").style.setProperty('--color1','blue');
// 删除
document.getElementById("box").style.removeProperty('--color1');

。

标签：--,variables,color,var,font,css,size
来源： https://www.cnblogs.com/fqh123/p/15110468.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css variables