是的,只要您正在处理根级自定义属性(IE9 +)。
- GitHub
- NPM
- 演示
从自述文件:
特征
- 客户端将CSS自定义属性转换为静态值
- 在现代和旧版浏览器中实时更新运行时值
- 变换
<link>
,<style>
和@import
CSS - 将相对
url()
路径转换为绝对URL - 支持链接和嵌套
var()
功能 - 支持
var()
功能后备值 - 支持Web组件/阴影DOM CSS
- 观看模式会自动更新
<link>
和<style>
更改 - 提供UMD和ES6模块
- 包含Typescript定义
- 轻量级(至少6k + gzip)且无依赖
局限性
- 自定义属性支持仅限于
:root
和:host
声明 - var()的使用仅限于属性值(根据W3C规范)
以下是库可以处理的一些示例:
根级自定义属性
:root { --a: red;}p { color: var(--a);}链接的自定义属性
:root { --a: var(--b); --b: var(--c); --c: red;}p { color: var(--a);}嵌套的自定义属性
:root { --a: 1em; --b: 2;}p { font-size: calc(var(--a) * var(--b));}后备值
p { font-size: var(--a, 1rem); color: var(--b, var(--c, var(--d, red))); }变换<link>
,<style>
和@import
CSS
<link rel="stylesheet" href="/absolute/path/to/style.css"><link rel="stylesheet" href="../relative/path/to/style.css"><style> @import "/absolute/path/to/style.css"; @import "../relative/path/to/style.css";</style>
转换Web组件/阴影DOM
<custom-element> #shadow-root <style> .my-custom-element { color: var(--test-color); } </style> <div >Hello.</div></custom-element>为了完整性:w3c规格
希望这可以帮助。



