如何使用类似于 SASS 的 darken() 的 CSS 变量创建颜色阴影？

Posted 2023-03-15

【中文标题】如何使用类似于 SASS 的 darken() 的 CSS 变量创建颜色阴影？

【英文标题】：How to create color shades using CSS variables similar to darken() of SASS?

【发布时间】：2021-09-06 10:56:04

【问题描述】：

我正在寻找一种修改 CSS 变量的方法，就像在 SCSS 中一样

定义一种颜色，如原色 - 我会自动获得焦点和活动状态的阴影。 基本上，想改变css变量中的一个变量，得到3个相同颜色的阴影。

我想在 CSS 中实现什么

$color-primary: #f00;

.button 
    background: $color-primary;

    &:hover,
    &:focus 
        background: darken($color-primary, 5%);
    

    &:active 
        background: darken($color-primary, 10%);
    

正在努力实现：

:root 
    --color-primary: #f00;
    --color-primary-darker: #f20000  //     var(--color-primary) * 5% darker
    --color-primary-darkest: #e50000 //     var(--color-primary) * 10% darker


.button 
    background: var(--color-primary);


.button:hover,
.button:focus 
    background: var(--color-primary-darker);


.button:active 
    background: var(--color-primary-darkest);

【参考方案1】：

这个怎么样（纯 sass/scss）：

首先，我们需要将颜色拆分为 hsla 值并将每个值保存在单独的自定义属性中。幸运的是，sass 有一些功能可以完成这项工作。

@mixin define-color($title, $color) 
    --#$title-h: #hue($color);
    --#$title-l: #lightness($color);
    --#$title-s: #saturation($color);
    --#$title-a: #alpha($color);

现在我们可以将其重新组合在一起，并在途中进行一些调整。

@function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) 
    @return hsla(
        calc(var(--#$title-h) + #$hue), 
        calc(var(--#$title-s) + #$saturation),
        calc(var(--#$title-l) + #$lightness),
        calc(var(--#$title-a) + #$alpha),
    );

现在我们准备定义一些颜色变量...

:root 
    @include define-color("primary", #696969);
    @include define-color("secondary", blue);

覆盖它们（例如在主题之间动态切换）...

:root.theme-light 
    @include define-color("primary", #424242);
    @include define-color("secondary", red);

使用和调整它们！

.example-class 
    color: color("primary");
    background: color("secondary", $lightness: +20%, $alpha: -0.3);
    border: 1px solid color("primary", $hue: -30deg, $saturation: 5%);

【参考方案2】：

新的Specification 引入了“相对颜色语法”，您可以在其中执行以下操作

:root 
    --color-primary: #f00; /* any format you want here */
    --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5%)); 
    --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10%)); 

想法是将主色转换为hsl 格式并使用calc() 调整亮度。

到目前为止仍然不支持此功能，因此请考虑以下解决方案。

---

你可以考虑hsl()颜色，简单控制亮度：

:root 
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 


.button 
    background: var(--color-primary);
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    cursor:pointer;


.button:hover,
.button:focus 
    background: var(--color-primary-darker);


.button:active 
    background: var(--color-primary-darkest);

<span class="button">some text</span>

顺便说一句，darken() 也在做同样的事情：

使颜色变深。获取颜色和介于 0% 和 100% 之间的数字，并返回 亮度降低该数量的颜色。

【讨论】：

如何为初始的 --color 变量设置另一种颜色？我不确定0, 100% 是如何等于红色的。

@Bribbons 使用转换器：rapidtables.com/convert/color/rgb-to-hsl.html

@TemaniAfif 解决方案有效。但是，不是硬编码亮度值，有没有一种方法可以随时随地从颜色中检索该值。看，我有十几种颜色，我想要一个更暗的版本

@Dibzmania 你能分享一个用例和代码吗？根据情况我们可以找到解决方案

@Dani Sass 和 Less 变量在运行前编译。 CSS 变量可以在运行时更改。这是 Sass 和 Less 无法做到的。例如，这意味着您可以更改变量的值以响应用户操作。对开发明/暗模式非常有帮助。如果不是不可能的话，这在 Sass/Less 中会复杂得多。

【参考方案3】：

如果您愿意采取不同的方法来解决您的问题，使用带有伪“:before”元素的掩码可以解决您的问题。虽然如果你使用它，我建议你将按钮中的任何内容放在 span 或其他东西中，给它一个“z-index：1”，所以内容不在掩码后面。

:root 
    --color-primary: #f00;


.button 
    position:relative;
    background: var(--color-primary);

    &:before 
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
    


.button:hover:before,
.button:focus:before 
    background:rgba(0,0,0,0.05) /* black mask with 5% opacity */


.button:active:before 
    background:rgba(0,0,0,0.1) /* black mask with 10% opacity */