变亮/变暗 scss 函数中的自定义 css 属性答案

【问题标题】：Custom css properties in lighten/darken scss function变亮/变暗 scss 函数中的自定义 css 属性
【发布时间】：2020-07-01 14:31:34
【问题描述】：

正如问题所建议的，我想在变亮/变暗函数中使用自定义 css 颜色（带有 --color*）。原因是我有一个 Ionic 应用程序，我想动态更改主题颜色，如下所示：

--ion-color-primary: #fff;
--ion-color-primary-rgb: 255, 255, 255;
--ion-color-primary-contrast: #000);
--ion-color-primary-contrast-rgb: 0, 0, 0;
--ion-color-primary-shade: darken(var(--ion-color-primary, 30);
--ion-color-primary-tint: lighten(var(--ion-color-primary, 30);

我正在从其他地方接收主要和主要对比度 css 属性，我希望能够根据它们动态设置阴影和色调。使用上面的代码，我收到一条错误消息$color: var(--ion-color-primary) is not a color.

Code snipper

【问题讨论】：

请把使用--ion-color-primary变量的代码的sn-p贴出来。
@RHShanks92 添加

标签： css ionic-framework sass

【解决方案1】：

自 v3.5.0 以来，Sass 发生了重大变化，您需要在插值中编写 sass 变量和函数。

为了提供与纯 CSS 的最大兼容性，较新版本的 Sass 要求将自定义属性值中的 SassScript 表达式写入插值中。插值也适用于旧的 Sass 版本，因此建议用于所有样式表。*

因此您的代码应如下所示：

$primary: aqua;
--ion-color-primary-shade: #{darken($primary, 30%)};
--ion-color-primary-tint: #{lighten($primary, 30%)};

为了达到最佳效果，请考虑使用scale-color() 而不是darken/lighten：

lighten() 函数以固定量增加亮度，这通常不是预期的效果。要使颜色比以前淡一定百分比，请改用 scale()。**

$primary: aqua;
--ion-color-primary-shade: #{scale-color($primary, $lightness: -30%)};
--ion-color-primary-tint: #{scale-color($primary, $lightness: 30%)};

*有关 sass 插值的更多信息，请参阅https://sass-lang.com/documentation/breaking-changes/css-vars。

**有关比例颜色的更多详细信息：https://sass-lang.com/documentation/modules/color#scale

【讨论】：