CSS类和变量

Question

我正在通过freecodecamp前端课程学习，根据我的理解，可以使用类和变量来最小化代码并使代码更易于维护。任何人都可以解释一下CSS变量最好只用于创建一个类并以这种方式应用样式吗？

谢谢，

Answer 1

这只是attribute：value的较高级别，它会影响其他类或id中的目标attribute：value。另一种方法是在受影响的元素中使用double类。例如，在freecodecamp课程中，企鹅的头和胳膊呈黑色。使用类别（头，手臂等）表示形状，边距等，使用类别2表示颜色，而不使用变量。例如..依此类推。

Answer 2

据我了解，变量可以在类内部定义。

我们创建的类可能还有其他值，例如font-family，width，border等以及我们的变量。因此，如果我们只需要更改一个值，例如：color，则只需更改变量。 如果仅使用类，则可能需要分别为每种颜色创建类，并包括我们需要的元素，这很繁琐。

请参阅fcc的企鹅部分（“ https://www.freecodecamp.org/learn/response-web-design/basic-css/use-css-variables-to-change-several-elements-at -once“）来澄清相同的内容。

Answer 3

将CSS类视为占位符。创建一次然后多次应用它。如果您想要更改它，一次更改会更新它应用的所有位置。

.custom-div {
  color: red;
  font-height: 2em;
  font-weight: 700;
}

CSS ID保留用于页面上的单个元素。这就是您的浏览器可以直接跳转到#my-section。

的原因

努力扩展CSS support for custom properties，有时也称为CSS变量。 SASS是引入CSS变量的系统的一个例子。