Search code examples
csscss-variables

Is it possible to use a block declaration as a CSS Custom Property?

I've received a generated CSS stylesheet from a designer using some fancy new code generation tool, and it produced a CSS custom property that I'm not sure how to use. It defines a custom variable similarly to the following:

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

Which appears to be a block declaration stored in a CSS custom property. After reading through the spec for CSS Custom Properties, it appears that this is not a use case that is supported (or at least documented). After looking at the tool used to generate this property, it appears that it has SASS output that is doing something similar to be used with @extend, so I'm curious if this is just an unusable variable that has resulted from a shared code-generator not understanding the limitations of the output format (pure CSS). It does use CSS variables correctly elsewhere.

Things I've tried, to no success:

/* 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);
}

I know I could use JS to get the actual content of the property, then parse and set the values, but this isn't ideal when the goal would just to use CSS. Note that getting the value of the custom property this way does show that it has the entire block declaration as desired. Hoping someone has run across this before and knows if this is possible at all.

Solution

  • A custom property is just that: an individual CSS property, with exactly one value. This value just happens to be usable in other property values via the var() function.

    The value of a custom property cannot be a declaration block, because a declaration block is not a property value. By extension, a single custom property cannot substitute for multiple property declarations.

    Whatever SCSS does with custom properties is non-standard and cannot be reproduced with a standard CSS stylesheet unless it's post-processed somehow (and even then, that's just pretending that custom properties can do more than what they're actually capable of by taking an additional dependency).