[分享]css中属性前加两个中划线

在 CSS 中，有一些属性前会加上两个中划线，例如 --color 和 --font-size。这些属性被称为自定义属性（Custom Properties），也被广泛地称为 CSS 变量（CSS Variables）。
CSS 变量可以在 CSS 中定义一次，然后在整个文档中使用。这使得在需要更改某些样式的情况下变得特别方便。例如，如果你想在整个文档中更改主题颜色，你只需更改一次 --color 属性的值即可。
定义一个自定义属性很简单。在 CSS 中，你可以使用 -- 以及你所希望的属性名称来定义它。例如：

:root {
  --color: #333;
} 

这里，我们在根元素 :root 中定义了一个 --color 属性，它的值为 #333。
要使用这个自定义属性，你可以在样式中引用它。例如：

h1 {
  color: var(--color);
} 

现在，所有的 h1 元素都会使用我们定义的 color 值。
自定义属性不仅可以存储颜色值，它们也可以存储任何有效的 CSS 值。例如，如果你希望存储字体大小，你可以这样做：

:root {
  --font-size: 1.5rem;
}
 
h1 {
  font-size: var(--font-size);
} 

现在，所有的 h1 元素都会使用我们定义的 font-size 值。
自定义属性还可以帮助你避免编写重复的代码。例如，如果你的网站有多个按钮，并且你希望它们有相同的样式，你可以这样做：

:root {
  --button-background-color: blue;
  --button-color: white;
  --button-padding: 10px 20px;
}
 
button {
  background-color: var(--button-background-color);
  color: var(--button-color);
  padding: var(--button-padding);
} 

现在，所有的 button 元素都会使用我们定义的样式。
通过这种方式，CSS 变量可以使代码更清晰，更具可维护性。在开发大型网站时，将来自多个样式表的变量集中定义是一种有效的做法。
总而言之，CSS 变量是一个强大的功能，可以使 CSS 更灵活、可维护。使用 -- 进行定义和 var() 进行引用，你可以创建具有可复用变量的样式，而无需重复编写一些样式。