Question

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

e.g。

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

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

e.g。

    --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变量中的默认值，并为它们设置适当的回退。

我可以将Less变量放在自定义CSS变量中吗？

1 个答案: