是否可以将块声明用作 CSS 自定义 属性？

Question

我收到了一个设计师使用一些新奇的代码生成工具生成的 CSS 样式表，它生成了一个 CSS 自定义 属性，我不确定如何生成使用。它定义了一个类似于以下内容的自定义变量：

:root {                                                                                         
    --custom-font-setting: {                                                                      
        color: red;                                                                             
        font-size: 12px;                                                                        
    };                                                                                          
}

这似乎是存储在 CSS 自定义 属性 中的块声明。在阅读 CSS Custom Properties 的规范后，这似乎不是受支持（或至少没有记录）的用例。在查看用于生成此 属性 的工具后，它似乎具有 SASS 输出，该输出正在执行类似于与 @extend 一起使用的操作，所以我很好奇这是否只是由于共享代码生成器不理解输出格式的限制（纯 CSS）而导致的不可用变量。它确实在其他地方正确使用 CSS 变量。

我尝试过但没有成功的事情：

/* Selector followed by var() */                                                                
h1 var(--custom-font-setting)                                                                   

/* Nested */                                                                                    
h1 {                                                                                            
    var(--custom-font-setting)                                                                  
}  

/* Just trying things at this point */
h1 {
    font: var(--custom-font-setting);
}

我知道我可以使用 JS to get the actual content of the property，然后解析并设置值，但是当目标只是使用 CSS 时，这并不理想。请注意，以这种方式获取自定义 属性 的值确实表明它具有所需的整个块声明。希望有人 运行 之前了解过这个并且知道这是否可行。

Answer 1

自定义 属性 就是：一个 CSS 属性 的个体，只有一个值。该值恰好可以通过 var() 函数用于其他 属性 值。

自定义 属性 的值不能是声明块，因为声明块不是 属性 值。推而广之，单个自定义 属性 无法替代多个 属性 声明。

SCSS 对自定义属性所做的任何操作都是非标准的，并且不能使用标准 CSS 样式表进行复制，除非它以某种方式被 post 处理（即便如此，这只是假装自定义属性可以通过额外的依赖来做比它们实际能够做的更多的事情）。

Answer 2

Hoping someone has run across this before and knows if this is possible at all.

不，在 CSS 中不可能在自定义 属性 中存储块声明。我在使用第 3 方 CSS 样式时遇到了同样的问题。一些将 SASS（或其他 CSS 框架）转换为 CSS 的工具并不总是 100% 正确。

您可以将块声明拆分为单独的属性，然后使用它（我就是这样做的）。