CSS 值中的 color() 和 l() 函数是什么意思？

Question

今天在挖掘Ghost代码时遇到了一些代码。从 API.

中提取数据后，我试图在我的 React 应用程序中创建相同的样式

我发现了这个：

:root {
    /* Colours */
    --blue: #3eb0ef;
    --green: #a4d037;
    --purple: #ad26b4;
    --yellow: #fecd35;
    --red: #f05230;
    --darkgrey: #15171A;
    --midgrey: #738a94;
    --lightgrey: #141e24;
    --whitegrey: #e5eff5;
    --pink: #fa3a57;
    --brown: #a3821a;
    --darkmode: color(var(--darkgrey) l(+2%));
}

.post-full-content pre {
    overflow-x: auto;
    margin: 1.5em 0 3em;
    padding: 20px;
    max-width: 100%;
    border: color(var(--darkgrey) l(-10%)) 1px solid;
    color: var(--whitegrey);
    font-size: 1.4rem;
    line-height: 1.5em;
    background: color(var(--darkgrey) l(-3%));
    border-radius: 5px;
}

CSS中的l()函数是什么？我到处都找不到。 WebStorm 无法识别它，也无法识别 VSCode。它在我的 CRA 应用程序中也不起作用。我认为 Ghost 之后也不会使用任何 CSS 处理器。那是什么？

我发现 gatsby-ghost-starter 在他们的代码中也有它。

但它没有为我的应用程序呈现：

幽灵应用程序：

Answer 1

它是 HSL/HWB 调整器的一部分，用于调整亮度 - 其他的是饱和度、白度和黑度。（快捷键 s、w、b）

[saturation( | s(] ['+' | '-' | *]? <percentage> )
[lightness( | l(] ['+' | '-' | *]? <percentage> )
[whiteness( | w(] ['+' | '-' | *]? <percentage> )
[blackness( | b(] ['+' | '-' | *]? <percentage> )

所以，声明

color(var(--darkgrey) l(+2%));

表示将“darkgray”的亮度调整+2%

Here 是使用 color() 函数

修改颜色的一些细节

编辑：

截至 2020 年 7 月，此功能只是一个草案。包含该行的很多详细信息。

Answer 2

个人感觉其他答案缺乏实际细节，所以在这里是。在您考虑使用其中的任何一个之前，您需要知道这些是目前没有广泛使用的功能。事实上，到目前为止，他们似乎是仅 Safari 支持：

https://caniuse.com#feat=css-color-function

特别是当前不支持 Firefox 或 Chrome:

它们记录在工作草案中 CSS 颜色模块级别 4：

https://w3.org/TR/2019/WD-css-color-4-20191105

但是如下所示，当前（也是唯一）推荐的版本是 CSS 颜色模块级别 3，所以除此之外的任何东西都应该仅在类似环境的测试中使用：

https://w3.org/TR?title=color

CSS 值中的 color() 和 l() 函数是什么意思？

What do the color() and l() function in a CSS value mean?

css

hsl