我记得我第一次在一个项目中尝试 Sass 的时候。我_首先_想要做的事情就是将我的颜色变量化。根据我在 HTML 中命名事物的技巧，我知道要避免像 .header-blue-left-bottom 这样的类，因为该元素的颜色和位置可能会发生变化。最好让它反映_它是什么_而不是_它是什么样子_。
所以，我试图让我的颜色在某种意义上具有_语义_——它们_代表_什么，而不是它们_实际上_是什么。
$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;但我发现我_完全记不住它们_，并且不得不不断参考我在哪里定义它们才能使用它们。后来，在“随它去吧”的时刻，我给颜色起了更像…这样的名字。
$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;
$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;我发现这在没有或几乎没有负面影响的情况下更直观。毕竟，这不是跨越 HTML-CSS 边界；这完全在 CSS 内部，并且仅面向开发者，这使得问题的范围更加狭窄。
以类似的方式，我尝试过将颜色保存在 Sass 映射中，例如
$colors: (
light: #ccc,
dark: #333
);但那里的唯一模糊目标是清理全局命名空间，这可能不值得每次都需要 map-get 的麻烦。如果你需要做任何事情，$-c-orange 这样的命名空间可能是一种更容易的方法。
如今，我在 Sass 中基本上坚持使用这种仅使用颜色名称的方法。随着向 CSS 自定义属性的转变，我认为拥有 --c-orange 和 --c-gray-5 同样合适。
:root {
-c-orange: #F060D6;
-c-red: #BB532E;
-c-blue: #4C9FEB;
-c-gray-1: #eee;
-c-gray-2: #ccc;
-c-gray-3: #555;
}你可以通过保持抽象来更具体地命名这些名称，就像 Marcus Ortense 所说
$color-primary:
$color-primary-dark:
$color-primary-light: $primary:
$primaryLight:
$primaryDark:
$secondary:
$secondaryLight:
$secondaryDark:
$neutralDarker:
$neutralDark:
$neutral:
$neutralLight:
$neutralLighter:
$neutralLightest: Silvestar Bistrović 最近写了一篇关于 使用抽象希腊数字命名法 的文章。
$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;我之前在媒体查询断点中使用过这种东西，因为数字在那里似乎很有意义（例如，低数字表示较小的屏幕，大数字表示较大的屏幕）。我也可以看到这对于同一颜色的色调或阴影来说是很好的，但为什么不使用常规数字呢？
我经常看到的另一种方法是将命名颜色与抽象名称结合起来。 Geoff 这样做，并且 John Carroll 在这里列出了。
$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;
// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;
// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;这可以根据你的需要变得尽可能冗长，甚至可以 在从调色板中调用时添加变体。
$table-row-background: lighten($color-background, 10%);
Stuart Robson 甚至在名称中加入了一些 BEM 风格，包括命名空间。
$ns-color__blue—dark: rgb(25,25,112);
$ns-brand__color—primary: $ns-color__blue—dark;
// component.scss
$ns-component__color—text: $ns-brand__color—primary;Material Design 使用类似于 font-weight 的值！这意味着你最终会得到一些东西，比如基本范围加上备选方案。
$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:
$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:
你如何选择颜色的名称？你可能会对如何称呼_阳光_黄与_向日葵_黄感兴趣，或者你可能只是需要一些帮助。这里有一个 项目 可以做到这一点，这里还有另一个。
甚至还有一个 Sublime Text 插件 用于转换它们（转换为任何你想要的语法）。
既然我们正在谈论命名