css - 我可以将 Less 变量放入自定义 CSS 变量中吗？

Question

我的任务是使用 CSS var() 函数将 LESS 变量更改为 CSS 自定义属性。

例如

:root {
    --body-bg:               #e0e0e0;
    --navbar-bg:             var(--body-bg);
    --content-bg-color:      #f8f8f8;

我想知道我是否可以在这些自定义变量中存储 LESS 变量？我使用 Bootstrap LESS 变量作为基础

例如

    --list-update-color:      mix(@brand-primary, #00f);
    --message-enquiry-color:  mix(@brand-primary, #00f);
    --ticked-color:          desaturate(lighten(@brand-info, 10%), 10%);
    --selecting-color:       desaturate(lighten(@brand-info, 5%), 10%);

Answer 1

简短的回答是肯定的，你可以。

现在是正确答案:你不应该(除非你要使用他们的额外能力并设置回退)

所有浏览器都支持 LESS 变量，因为它们编译为常规 CSS。某些浏览器不支持 CSS 变量，尤其是 IE(而且永远不会)。

因此，如果您要像使用常规变量一样使用它，那么更改实际上没有任何意义。

但 CSS 变量远不止于此。他们 can be changed at runtime with javascript ，它们提供 DOM 树范围，因此 for extremely awesome modifiers ，并且在用作渐进增强时可以提供更好的用户体验。

请记住，您完全必须 set a fallback对他们来说，这样 IE 就不会得到完全空的声明。

总而言之，您可能希望保留 LESS 变量，将它们用作 CSS 变量中的默认值，并为它们设置适当的回退。