As a CSS pre-processor, Sass has two particular advantages for web developers, especially those who are still obligated to support IE8: it offers excellent color manipulation, while allowing us to use HSL in older browsers.
作为CSS预处理器，Sass对于Web开发人员，特别是那些仍然有义务支持IE8的开发人员，具有两个特别的优势：它提供了出色的颜色处理，同时允许我们在较旧的浏览器中使用HSL 。
The initial, obvious advantage is that Sass allows you to state colors as variables:
最初的明显优势是Sass允许您将颜色声明为变量：
$base-color: #93aacd;
button {
background: $base-color;
}This makes referencing colors much easier, especially in long, complex stylesheets.
这使引用颜色变得更加容易，尤其是在较长的复杂样式表中。
在Sass中使用HSL的优势 (The Advantages of Using HSL in Sass)
I’ve written previously on the reasons web developers and designers should be using HSL colors in CSS.
我之前已经写过Web开发人员和设计人员应在CSS中使用HSL颜色的原因 。
However, there’s one major issue: IE8 has no understanding of HSL at all. Confronted with an HSL CSS declaration:
但是，有一个主要问题：IE8完全不了解HSL。 带有HSL CSS声明：
body {
background: hsl(30,100%,50%);
}…the page background won’t change from the default white in IE8.
…页面背景不会从IE8中的默认白色更改。
However, if we make the same statement in Sass, the preprocessor will automatically convert the HSL color to hexadecimal in the final CSS output. This is achievable due to the fact that hexadecimal and hsl have that same gamut, i.e. they cover the same range of colors; it’s just that HSL is far easier to write and adjust.
但是 ，如果我们在Sass中做出相同的声明，则预处理器将在最终CSS输出中自动将HSL颜色转换为十六进制。 由于十六进制和hsl具有相同的色域，即它们覆盖相同的颜色范围，因此可以实现。 只是HSL的编写和调整要容易得多。
You can see this for yourself in the associated CodePen. Just right-click anywhere in the preview pane, choose Inspect Element, select the <body> element, and take a look at the color applied to the background: it’s a keyword, despite the fact that the color was originally applied as HSL. That’s Sass magic.
您可以在关联的CodePen中自己查看 。 只需在预览窗格中的任意位置上单击鼠标右键，选择Inspect Element ，选择<body>元素，然后查看应用于背景的颜色：尽管实际上该颜色最初是作为HSL应用的，但它还是一个关键字。 那是萨斯的魔法。
This means that you can employ the usefulness of HSL in stylesheets without worrying about browser incompatibility.
这意味着您可以在样式表中使用HSL的有用性，而不必担心浏览器不兼容。
Note that Sass will translate HSLa colors (i.e. HSL colors with a transparency component) into equivalent RGBa colors, but that doesn’t provide any extra browser compatibility with regards to Internet Explorer: IE8 is equally ignorant of both RGBa and HSLa).
请注意，Sass会将HSLa颜色(即带有透明组件的HSL颜色)转换为等效的RGBa颜色，但是就Internet Explorer而言，它不提供任何额外的浏览器兼容性：IE8对RGBa和HSLa均一无所知。
There are two more handy pairs of color functions in Sass that relate directly to HSL:
Sass中还有两对方便使用的颜色函数对，它们与HSL直接相关：
亮度和暗度，色相和饱和度 (Brightness & Darkness, Hue & Saturation)
Sass also features the darken and lighten color functions. Returning to our earlier example of a color variable:
Sass还具有darken lighten颜色功能。 回到我们前面的颜色变量示例：
$base-color: hsl(30, 100%, 40%);We can use lighten to raise the color by a percentage:
我们可以使用lighten将颜色提高一定百分比：
.brighter {
@extend .color-chip;
background: lighten($base-color, 10%);
}Visually, this is exactly equivalent to applying the same color in HSL and moving up the luminosity component by 10%:
在视觉上，这完全等同于在HSL中应用相同的颜色并将亮度分量上移10％：
.brighter {
@extend .color-chip;
background: hsl(30, 100%, 50%);
}The result:
结果：
$base-color:
$ base-color：
hsl(30, 100%, 40%)
hsl(30, 100%, 40%)
lighten($base-color, 10%);
变亮($ base-color，10％);
hsl(30, 100%, 50%)
hsl(30, 100%, 50%)
Note that you can use the Sass function on any CSS color you wish: hex, rgb, even a color keyword. Sass actually converts the color to HSL to apply the luminosity shift before converting it back into the correct hexadecimal or keyword value for your CSS output.
请注意，您可以在所需的任何CSS颜色上使用Sass函数：hex，rgb甚至是color关键字。 Sass实际上将颜色转换为HSL以应用亮度变化，然后再将其转换回CSS输出的正确十六进制或关键字值。
Similarly, with darken:
同样，用变暗：
.darker {
@extend .color-chip;
background: darken($base-color, 10%);
}…and saturation:
…和饱和度：
.more-saturated {
@extend .color-chip;
background: saturate($base-color, 10%);
}The latter, given our original color in HSL, is equivalent to:
鉴于我们在HSL中的原始颜色，后者相当于：
.more-saturated {
@extend .color-chip;
background: hsl(30, 100%, 40%);
}Also, desaturation:
此外，去饱和：
.less-saturated {
@extend .color-chip;
background: desaturate($base-color, 10%);
}The equivalency between the Sass color functions and HSL stumbles slightly with adjust-hue, which uses percentage points for adjustments. In native HSL, hue changes are measured in degrees… but Sass rather confusingly applies the percentage amount as a degree, meaning that the following:
Sass色彩功能和HSL之间的等效性在使用Adjust adjust-hue进行adjust-hue略有下降，该调整使用百分比点进行调整。 在本机HSL中，色度变化以度为单位进行度量……但是Sass相当令人困惑地将百分比量应用为度，这意味着：
.less-saturated {
@extend .color-chip;
background: adjust-hue($base-color, 10%);
}…will move the hue by 10 degrees.
…将使色相移动10度。
Tip: In Chrome, holding down the SHIFT key while clicking on a color in Inspect Element will switch it between displaying in equivalent CSS color systems (hexadecimal, HSL, RGB, etc): very useful for converting colors between different systems.
提示 ：在Chrome中，按住SHIFT键的同时单击Inspect Element中的颜色，将在显示相同CSS颜色系统(十六进制，HSL，RGB等)之间进行切换：在不同系统之间转换颜色时非常有用。
All of these colors are translated “under the hood” by Sass into hexadecimal… but by starting with HSL, you have a native understanding of exactly what is going on, and can move back and forth between HSL and Sass color functions with ease.
所有这些颜色都由Sass转换为“十六进制”……但是，从HSL开始，您对正在发生的事情有了原生的了解，并且可以轻松地在HSL和Sass颜色功能之间来回移动。
Ryan Allen also has an excellent article on why web designers should use HSL.
Ryan Allen也有一篇很棒的文章，介绍了为什么Web设计师应该使用HSL 。
It’s possible to take colors in Sass much further, even to the extent of entirely remapping color keywords to more appropriate hues while making new ones, as I have in my New Defaults.
就像我在New Defaults中一样，甚至可以在Sass中将颜色完全重新映射为更合适的色相，而在Sass中更进一步。
翻译自: https://thenewcode.com/982/Learning-Sass-With-CodePen-Part-Four-Color
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
