46 lines
2.0 KiB
Markdown
46 lines
2.0 KiB
Markdown
|
---
|
|||
|
|
title: CSS Custom Properties
|
|||
|
|
localeTitle: CSS自定义属性
|
|||
|
|
---
|
|||
|
|
## CSS自定义属性
|
|||
|
|
|
|||
|
|
CSS自定义属性也称为CSS变量。截至2018年10月，CSS定制属性仍然是一项实验性技术。在生产中使用该功能之前，请考虑[浏览器支持](https://developer.mozilla.org/en-US/docs/Web/CSS/--*#Browser_compatibility)
|
|||
|
|
|
|||
|
|
### 声明自定义属性
|
|||
|
|
|
|||
|
|
在选择器中，使用两个连字符（ - ）和名称（后跟值）声明自定义属性。值可以是简单的，例如颜色（RGB，十六进制代码等）或大小（使用像素，em，rem等），或者它可以更复杂，如阴影定义。请参阅以下示例。
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--firstVariable: red;
|
|||
|
|
--headerSize: 16px;
|
|||
|
|
--dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在`:root`选择器中声明自定义属性使这些属性全局可用。 `:root`选择器可以被认为与`html`选择器相同。
|
|||
|
|
|
|||
|
|
### 使用自定义属性
|
|||
|
|
|
|||
|
|
要使用自定义属性，将使用`var()`函数，该函数接受自定义属性名称的单个参数。 \`\`\`CSS h1 { font-size：var（ - headerSize）; }
|
|||
|
|
|
|||
|
|
.card { box-shadow：var（ - dropShadow）; }
|
|||
|
|
```
|
|||
|
|
### Cascading Custom Properties
|
|||
|
|
When custom properties are declared in the `:root` selector, those properties are globally available; any style rules can use the properties. If a custom property needs to be different for specific element, class, or id, a property of the same can be declared in that selector. The compiler will first look for a property name within the immediate enclosing selector, then move to the `:root`.
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
CSS ：根 { - 色彩：红色; }
|
|||
|
|
|
|||
|
|
h1 { - 颜色：蓝色; }
|
|||
|
|
|
|||
|
|
h1 { font-color：var（ - font-color）; /\* 蓝色 \*/ }
|
|||
|
|
|
|||
|
|
h2 { font-color：var（ - font-color）; / \*红\* / } \`\`\`
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
欲了解更多信息，请访
|
|||
|
|
|
|||
|
|
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
|
|||
|
|
* [W3C候选推荐文件](https://www.w3.org/TR/css-variables/)
|
|||
|
|
* [浏览器支持](https://caniuse.com/#feat=css-variables)
|