时间戳

首页 > 解决方案 > CSS 值中的 color() 和 l() 函数是什么意思？

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

问题描述

今天在挖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;
}

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

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

但它不是为我的应用程序渲染：

我的应用

幽灵应用：

幽灵应用

标签： csshsl

解决方案

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

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

所以，声明

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

表示将“深灰色”的亮度调整 +2%

以下color()是使用函数修改颜色的一些细节

编辑：

截至 2020 年 7 月，此功能只是一个草稿。另一个答案包含该行的很多细节。

推荐阅读