指南针忽略 SCSS 文件中的色调和阴影功能答案

【问题标题】：Compass ignoring tint and shade functions in SCSS file指南针忽略 SCSS 文件中的色调和阴影功能
【发布时间】：2013-09-01 05:00:28
【问题描述】：

我在使用 compass 编译几个 SCSS 文件时遇到问题。基本上 tint 和 shade 函数被忽略了。所以，这个：

border:solid 1px tint( $custom-ui-base-color, 5% );
background-color:shade( $custom-ui-base-color, 15% );

变成这样：

border: solid 1px tint(#096fcb, 5%);
background-color: shade(#096fcb, 15%);

这显然不是有效的 CSS。 Compass 已替换变量但未计算函数，是否有任何原因可能会出现这种情况？可能是指南针中的设置或命令行参数？

【问题讨论】：

标签： css sass compass-sass

【解决方案1】：

我知道这已经晚了，但我遇到了同样的问题，直到我发现我可以使用 mix() 函数。也许这对其他人有帮助。 mix() 可以用您想要的任何颜色为您现有的颜色着色。所以要把它染成白色（这似乎是你想要的），你只需这样做：

$color: mix(white,$color, 15%);

第一个参数是您希望主色着色的颜色，第二个参数是您的颜色，第三个参数是您希望与主色混合的颜色量（在本例中为白色）。

所以就我而言，我混合了 15% 的白色。

【讨论】：

请注意，此问题指定了 Compass（提供色调和阴影功能）。如果您没有使用 Compass（或其他定义它们的库），那么您当然没有这些功能可用。
在定义变量时，即使使用指南针，我也遇到了问题：$something: tint($color, 15%) 并在另一个函数中使用它：background-image: linear-gradient(to right, $something 0%, $something 100%);，我的 $something 完全替换为 tint(...)，并且未在输出中进行评估.直接使用tint 而不是作为变量起作用。用变量中的mix 替换它解决了它。

【解决方案2】：

我进行了一些挖掘，看起来像these functions were added to Compass core about a year ago，尽管我没有进一步挖掘更改日志以查看他们将其制成的版本。

Tint 和 Shade 不是内置的 SASS 颜色函数。 Compass documentation 引用了它们，但 the corresponding SASS docs do not。因此它们必须是 Compass 的附加组件，并且可以作为附加库扩展访问。

Net Magazine's examples 使您看起来好像在正确使用它们。所以，我不确定该指向哪里，但您可以尝试更多地调试这些函数，看看是否可以编译它们。尝试使用 shade( #{$custom-ui-base-color}, 15% ) 作为开始，这应该会强制 Compass 在另一个计算之前执行一个计算（在这种情况下，只需编译变量）。

函数的 Ruby 文档：http://ruby-doc.org/gems/docs/c/compass-0.12.2/Compass/SassExtensions/Functions/Colors.html

祝你好运！

【讨论】：