sass 变量
One of the best reasons to use Sass is variables. They help keep your code , which makes it easy to maintain and change. However, with colors, it's easy for your variables to get out of hand. In this article, I'll show you an quick, easy method to wrangle your color variables.
使用Sass的最好原因之一是变量。 它们有助于使代码保持 ，从而易于维护和更改。 但是，对于颜色来说，变量很容易失控。 在本文中，我将向您展示一种快速，简单的方法来纠缠颜色变量。
问题 (The Problem)
Let's say you have the following CSS:
假设您有以下CSS：
h1 { background-color: #b0eb00; }a { color: #b0eb00;}button { border-color: #b0eb00; box-shadow: 0 0 1rem #b0eb00;} If you decide to use a different color than #b0eb00, you have to change it in multiple places. This quickly becomes aggravating in a large project. But, with Sass, you can use a variable!
如果决定使用与#b0eb00不同的颜色，则必须在多个位置进行更改。 在一个大型项目中，这很快变得很麻烦。 但是，使用Sass，您可以使用变量！
$yellow-green: #b0eb00;h1 { background-color: #b0eb00; }a { color: #b0eb00;}button { border-color: #b0eb00; box-shadow: 0 0 1rem #b0eb00;} Now, it's easy to change the value of $yellow-green everywhere. It's also simple to locate the places where $yellow-green is used by searching for it.
现在，在任何地方更改$yellow-green的值都很容易。 通过搜索找到使用$yellow-green的位置也很简单。
As you accumulate color variables, you may decide to stick them in in their own file.
在累积颜色变量时，您可能决定将它们放在自己的文件中。
$yellow-green: #b0eb00;$gray: #595959;$dark-gray: #363636;$light-gray: #a6a6a6;
Over time, this file grows until you end up with a mess.
随着时间的流逝，该文件会不断增长，直到您陷入混乱。
$yellow-green: #b0eb00;$red: #b30015;$blue: #2a00b3;$other-blue: #0077b3;$cyan: #00b0b3;$transparent-cyan: #24fbff;$periwinkle: #8a7dff;$light-gray: #a6a6a6;$gray: #595959;$darkish-gray: #444;$dark-gray: #363636;$darker-gray: #303030;$darkest-gray: #292929;$darkester-gray: #111;
Every time you add a new color, it becomes more difficult to find a name for it. Should #0c0c0c be $darkesterest-gray? How about $almost-black? When using these variables, it's difficult to remember the names without looking them up.
每次添加新颜色时，为它找到名称变得更加困难。 #0c0c0c应该是$darkesterest-gray吗？ $almost-black呢？ 使用这些变量时，不查找它们就很难记住它们的名称。
无效的无效解决方案 (A Bad Solution That Does Not Work)
You've felt the pain of your color variables and decided to refactor. Instead of naming the variables after colors, now you're going to name them after how they're used.
您已经感到颜色变量的痛苦，并决定进行重构。 现在不用以颜色命名变量，而是以使用方式命名它们。
$background-color: #b0eb00;$error-color: #b30015;$anchor-color: #2a00b3;$anchor-hover-color: #0077b3;$anchor-visited-color: #00b0b3;$anchor-visited-blending-color: #24fbff;$tooltip-color: #8a7dff;$emphasis-color: #a6a6a6;$text-color: #595959;$strong-color: #444;$username-color: #363636;$shadow-color: #303030;$border-color: #292929;$marquee-color: #111;
At least now it's obvious what the variables are by looking at them. It's also really easy to change your colors. The problem is the variables aren't reusable. What happens when decide to use #292929 as the background color for your buttons? Do you rename $border-color to $border-and-button-color? Do you add another variable and duplicate the value?
至少现在通过查看变量可以明显看出它们是什么。 更改颜色也非常容易。 问题在于变量不可重用 。 当决定使用#292929作为按钮的背景色时会发生什么？ 您是否将$border-color重命名$border-color $border-and-button-color ？ 是否添加另一个变量并重复该值？
Let's say you want to change the anchor color. Rather than changing it in the anchor styles, where it's used, you have to search for $anchor-color in the big list of color variables. Gross!
假设您要更改锚点颜色。 与其在使用的锚样式中进行更改，不如在颜色变量的大列表中搜索$anchor-color 。 毛！
另一个无效的解决方案 (Another Solution That Doesn't Work)
You've given up naming colors and decided to use numbers instead.
您已经放弃了命名颜色，而是决定使用数字来代替。
$color1: #b0eb00;$color2: #b30015;$color3: #2a00b3;$color4: #0077b3;$color5: #00b0b3;$color6: #24fbff;$color7: #8a7dff;$color8: #a6a6a6;$color9: #595959;$color10: #444;$color11: #363636;$color12: #303030;$color13: #292929;$color14: #111;
Now your variables are unique, but they're difficult to remember. Was the border color $color12 or $color13? If you see $color4 in your code, can you tell what color it is without looking it up? What happens when you want to remove $color8? Do you rename the subsequent colors or let your ordering get messed up?
现在，您的变量是唯一的，但是很难记住。 边框颜色是$color12还是$color13 ？ 如果您在代码中看到$color4 ，可以不查找就知道它是什么颜色？ 当您要删除$color8怎样？ 您是重命名后续颜色还是让您的订单混乱？
一种新方法 (A New Approach)
Wouldn't it be nice if you could name your variables after colors like you were trying to do at the start, but without all the naming difficulty? You can using ! Using this tool, rename your color variables.
如果可以像开始时一样尝试用颜色命名变量，但没有所有命名困难，那不是很好吗？ 您可以使用“ ！ 使用此工具，重命名颜色变量。
$lime: #b0eb00;$bright-red: #b30015;$dark-blue: #2a00b3;$deep-cerulean: #0077b3;$bondi-blue: #00b0b3;$cyan: #24fbff;$heliotrope: #8a7dff;$silver-chalice: #a6a6a6;$scorpion: #595959;$tundora: #444;$mine-shaft: #363636;$cod-gray: #111;
Now your variables are named after colors, but they're unique and memorable.
现在，您的变量以颜色命名，但是它们是唯一且令人难忘的。
My favorite feature of Name That Color is it shows you the closest color when the hex code doesn't match a color exactly. This tool has more than 1500 color names, so it's easy to find names for all of your variables.
我最喜欢的颜色名称命名功能是，当十六进制代码与颜色完全不匹配时，它将为您显示最接近的颜色。 该工具具有1500多种颜色名称，因此可以轻松找到所有变量的名称。
What about colors that are really close? For example, #303030 and #292929 would both be named $mine-shaft. To keep your color variables from becoming too granular, if a color name is duplicated, then it's not worth having its own variable. Instead, use the built in Sass color functions. In the above example, you would use darken($mine-shaft, 2.5%) instead of #303030.
那么真正接近的颜色呢？ 例如， #303030和#292929都将被命名为$mine-shaft 。 为了避免颜色变量变得过于精细，如果颜色名称重复，则不值得拥有自己的变量。 而是使用内置的Sass颜色功能。 在上面的示例中，您将使用darken($mine-shaft, 2.5%)代替#303030 。
而已！ (That's It!)
You've mastered the art of simple color variable naming and you can move on with your life. Enjoy!
您已经掌握了简单的颜色变量命名技术，可以继续生活。 请享用！
Edit: A few people have asked how to change a color using this methodology. For example, how would you swap $crimson for $royal-blue? Because your colors are uniquely named, it's easy to do a quick find and replace to swap them out. Every modern code editor supports this feature, so change away!
编辑：一些人问过如何使用这种方法更改颜色。 例如，如何将$crimson换成$royal-blue ？ 由于您的颜色具有唯一的名称，因此很容易快速查找并替换以换出它们。 每个现代的代码编辑器都支持此功能，因此请不要使用！
翻译自:
sass 变量