记录一下calc的用法

Posted 2021-09-03 周沒有

一、兼容性
2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。

二、用法
声明css变量的时候，变量名前面要加两根连词线（--）。
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

1.全局/局部变量

1.1 :root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

:root { --color: blue; }
.box{color: var(--color)}

1.2 局部变量

.box{
    --color: red;
    color: var(--color);
}

1.3 var()函数的第二个参数默认值

.box{
    --color: red;
    color: var(--bg,pink);
}

1.4 可以结合CSS3 calc()一起计算

p{
--size: 20;
font-size: calc(var(--size) * 1px);//20px
}
1.5 CSS变量的继承(就近原则)

<div class="box" id="alert">muzidigbig</div>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

三、注意问题
1.当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法。

2.变量的取值采用就近原则。

3.如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接。

.foo {
--gap: 20;
/ 无效 /
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
/ 有效 /
margin-top: calc(var(--gap) * 1px);
}
4.如果变量值带有单位，就不能写成字符串。

/ 无效 /
.foo {
--foo: \'20px\';
font-size: var(--foo);
}

/ 有效 /
.foo {
--foo: 20px;
font-size: var(--foo);
}

5. CSS属性名是不可以使用变量的。例如下面写法是错误的：

body {

--bc: background-color;    
var(--bc): #369;

}

6. css变量是存在缺省值，只要定义正确，里面的值不对，结果以缺省值显示：如:

body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);/背景色为：transparent/
}

7. css变量默认尾部是有空格的。例如：

p{
--size: 20;
font-size: var(--size)px;//等同于font-size:20 px;这里将使用元素默认的大小。这里可以结合上面例子calc()使用。
}
四、兼容性处理
别处理了放弃低版本浏览器吧。
检查是否兼容:说实话我是不想检测兼容的自己试呢反正都是最新的东西，等团队决定要用了兼容问题也不会太严重
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 变量的写法

window.onload = function() {
    // 设置值
    document.body.style.setProperty("--primary","pink");
    // 读取值
    let primary = document.body.style.getPropertyValue("--primary");
    console.log(primary);
    // 删除变量;返回删除的变量值
    let delPrimary = document.body.style.removeProperty("--primary");
    console.log(delPrimary);
}

补充知识：

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

.elm {

/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();

}

————————————————
版权声明：本文为CSDN博主「muzidigbig」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/muzidig...