We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关于 CSS 自定义变量 新的草案介绍可以通过自定义变量进行 CSS 的赋值。
变量名前面要加两根连词线(--), 变量名大小写敏感
body { --foo: #7F583F; --bar: #F7EFD2; }
var() 函数用于读取变量,也可用于变量声明,只能作为属性值,不能用作属性名。
a { color: var(--foo); text-decoration-color: var(--bar); } :root { --primary-color: red; --logo-text: var(--primary-color); }
var 函数第二个参数,表示变量的默认值。参数可以带逗号和空格。
color: var(--foo, #7F583F); var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px 15px 20px);
字符串:可以与其它字符串进行拼接。
--bar: 'hello'; --foo: var(--bar)' world';
数值:不能与数值单位直接连用,必须使用 calc() 函数。如果变量值带有单位,不能写成字符串,直接写:--foo: 20px;
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px; } .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); }
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的“层叠”规则是一致的。
<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div>
变量的作用域就是它所在的选择器的有效范围,全局的变量通常放在根元素 :root 里面,确保任何选择器都可以读取。
可以在 media 命令里声明变量,使得不同的屏幕宽度有不同的变量值。
body { --primary: #7F583F; --secondary: #F7EFD2; } a { color: var(--primary); text-decoration-color: var(--secondary); } @media screen and (min-width: 768px) { body { --primary: #F7EFD2; --secondary: #7F583F; } }
不支持 CSS 变量的浏览器,采用以下写法
a { color: #7F583F; color: var(--primary); } 也可以使用@supports命令进行检测。 @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }
JS操作
检测浏览器是否支持 CSS 变量。
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }
操作 CSS 变量。
// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); // 读取变量 document.body.style.getPropertyValue('--primary').trim(); // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary');
JS 可以将任意值存入样式表,也可以读取任意 CSS 变量值。CSS 变量提供了一种 JS 与 CSS 通信的一种途径。
比如我们如果当算设置主题色,我们需要在样式表的很多地方用到这样的颜色。我们可以将这些颜色设置为变量,然后在其他地方引用,而不是直接进行赋值。(写过less sass的应该可以体会到它的好处)
:root { --theme-colour: cornflowerblue; } h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }
当然这种特性 less 和 sass 已经很早支持了,但是css实现这个支持也有一定得好处,比如我们可以通过 JS 实现颜色值得统一更新。
const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');
CSS Variables的兼容性
The text was updated successfully, but these errors were encountered:
No branches or pull requests
CSS Variables (CSS 变量)
关于 CSS 自定义变量 新的草案介绍可以通过自定义变量进行 CSS 的赋值。
声明
变量名前面要加两根连词线(--), 变量名大小写敏感
var() 函数
变量值的类型
作用域
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的“层叠”规则是一致的。
变量的作用域就是它所在的选择器的有效范围,全局的变量通常放在根元素 :root 里面,确保任何选择器都可以读取。
响应式布局
可以在 media 命令里声明变量,使得不同的屏幕宽度有不同的变量值。
兼容性处理
不支持 CSS 变量的浏览器,采用以下写法
JS操作
检测浏览器是否支持 CSS 变量。
操作 CSS 变量。
JS 可以将任意值存入样式表,也可以读取任意 CSS 变量值。CSS 变量提供了一种 JS 与 CSS 通信的一种途径。
tips
比如我们如果当算设置主题色,我们需要在样式表的很多地方用到这样的颜色。我们可以将这些颜色设置为变量,然后在其他地方引用,而不是直接进行赋值。(写过less sass的应该可以体会到它的好处)
当然这种特性 less 和 sass 已经很早支持了,但是css实现这个支持也有一定得好处,比如我们可以通过 JS 实现颜色值得统一更新。
CSS Variables的兼容性
The text was updated successfully, but these errors were encountered: