在 HTML CSS / SCSS 中使用调色板

Using color palette in HTML CSS / SCSS

考虑一下，我有一个调色板（5 种颜色，来自 coolors.co）。 我的问题是，如何高效、干净地使用来自 CSS（或 SCSS）的这些颜色。

当我浏览网站资源时，它们确实编码了 CSS（classes 是哈希值）并且根本难以阅读。

以下是我对该功能的要求：

我的实现思路：

以下是我的想法，但 none 对我来说似乎很干净。

1) 至 HTML

所以，在，让我们说 colors.scss，陈述诸如：

html{
   background: black
}
h1, h2{
   color: red
}
p{
color: white 
}

缺点是，每个绝对定位 window 的叠加层都必须同时定义背景（通过 class），一般来说，这些样式是不够的，无论如何你都会必须通过 classes.

定义异常

2) 通过 classes

所以，定义 class 像 color-primary、color-secondary、color-tertiary，然后在每个项目中添加这样一个 class，即，然而，脏。 另一方面，颜色的定义将放在一个地方（.css 文件），这对我们编码员来说是一个很好的做法。

3) 在 scss

中使用 mixins

我知道 mixins 是如何工作的，但我觉得，虽然它可以通过 mixins 来完成，但这是一个不必要的复杂化。

所以我的问题是，这些配色方案和调色板在实践中是如何处理的？在哪里定义 5 种颜色，以及如何在整个 HTML 项目中分配它们，使用 CSS 或 SCSS (SASS)?

让我们分解一下您的想法：

  1. 使用 HTML 标签 - 这是非常不可定制的。最终，您将使用的标签数量有限，并且您可能不希望它们看起来都一样。
  2. 类 - 它可以工作，但它不是那么容易实现，并且会使你的代码更难阅读和调试（并且不那么漂亮），所以基本上不是一个好的做法
  3. mixins，我看不出 mixins 将如何帮助您实现这一点。它们更多地用作 top-level 语句容器或用于重用 类，根据我的第二点，我们不希望这样。

我的建议-

通常，在我的开发过程中，我有一个 variables.scss 文件，其中包含我所有的全局变量，我在它们所在的 类 旁边声明局部变量。你可以阅读更多信息 here, and about variables naming conventions here and also here.

但使用变量背后的逻辑是让您的代码更具可读性，因为您可以将变量命名为：title-level-1，这将使您的 UI 更加一致。

如果您想改用 CSS-variables，您可以阅读更多内容 here and here