关于css:css变量

43次阅读

共计 1418 个字符,预计需要花费 4 分钟才能阅读完成。

参考链接:
阮一峰 css 笔记:http://www.ruanyifeng.com/blo…
MDN CSS 变量教程:https://developer.mozilla.org…

浏览器反对水平:
支流古代浏览器反对

根本应用:

1、定义:

应用 -- 符号申明一个 css 变量,变量的值能够为任意数值

:root {--main-bg-color: brown;}

变量名辨别大小写,且领有作用域,个别 css 变量全局应用,则放到 :root 中即可


2、作用域

:root {--color: red;}

div {--color: blue;}

.box {
    height: 100px;
    width: 100px;
    background-color: var(--color);
}
<div class="box"></div>
<p class="box"></p>

运行 html 代码,失去一个蓝色的 div 和红色的 p 标签,这是受作用域的影响,和款式的优先级一样,获取变量时拿到的是最精准的作用域下的变量,id > class > 标签 > 全局

利用作用域,咱们能够做这两件罕用的操作:
(1)媒体查问批改变量

@media screen and (max-width: 375px) {
  body {--padding: 5px;}
}


@media screen and (max-width: 1080px) {
  body {--padding: 15px;}
}

(2)js 切换类名更换主题色

.white-theme {
    --bg-color: #fff;
    --color: #333;
}

.black-theme {
    --bg-color: #333;
    --color: #fff;    
}

通过 js 切换类名,即可切换不同的变量,须要留神的是,主题类须要在节点最外层,比方 body 或者 app 类上,其次须要用到主题色的中央都要应用变量


3、调用变量:

应用 var() 函数和变量名调用变量

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

变量只能用做属性值,不能用做属性名


4、默认值和向下兼容:

var() 函数能够承受第二个参数,用作找不到变量时的默认值

.red {color: var(--theme-color,red);
}

.red {color: var(--theme-color, var(--color,red));
}

咱们无奈保障用户应用的设施都反对 css 变量的个性,所以必要状况下能够进行向下兼容的解决:如果 var 有效,则应用前一个属性值 \

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

5、js 操作变量

(1)检测是否反对 css 变量

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {/* supported */} else {/* not supported */}

(2)操作变量

// 设置
document.body.style.setProperty("--color","red");

// 读取
document.body.style.getPropertyValue("--color");

// 删除
document.body.style.removeProperty("--color");

显然,js 操作变量须要在 document 的环境下,在一些非凡的场合开发就无奈发挥作用了,比方 uniapp 中的多端等。

正文完
 0