css中的自定义属性

在CSS中，我们可以自定义属性（Custom Properties），也被称为变量（Variables）。通过使用自定义属性，我们可以使代码更加模块化，更加简洁。我们可以为颜色、字体大小、间距、边框等样式属性创建自定义属性。这些自定义属性可以在整个CSS文件中重复使用，以减少代码的重复性。

:root {
  --primary-color: #005999;
  --secondary-color: #EC7F6B;
  --font-size: 16px;
  
}

.container {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

以上代码中：

1. 使用:root伪类来定义全局的自定义属性。

2. 通过定义--primary-color和--secondary-color属性的值来创建两种不同的颜色值。

3. 定义--font-size属性的值为16px。

4. 在.container类的样式规则中使用var() 函数并传入所需的自定义属性来引用上述定义好的自定义属性。

这个简单的例子表明了如何通过自定义属性来减少代码的重复性。另外，我们还可以通过改变:root伪类中的自定义属性的值来灵活地改变不同元素的样式。