时间戳

首页 > 解决方案 > 地图和主题

css - 地图和主题

问题描述

我不熟悉使用 CSS 预编译器并开始使用 Less。我找到了将主题添加到我的网络应用程序的 Sass 代码，并且效果很好。

https://codepen.io/dmitriy_borodiy/pen/RKzwJp

我正在尝试将其转换为 Less 并且难以重写它。我已经阅读了较少的文档，但很遗憾地说我什至无法创建多级主题变量。

sass 变量如下： 

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd
  ),
);

下面的转换是完全错误的，但这是我尝试过的：

@set: {
  light: {
    backgroundColor: white,
    textColor: #408bbd
  },
  dark: {
    backgroundColor: #222,
    textColor: #ddd
  },
}

编辑：

我正在努力实现的示例：

.theme(key) {  
    return all outcomes using @themes variable.  
}  

div {  
    background: .theme(divBackgroundColor)  
}   
  
it should return the following css :  
.light-theme div{  
    background: white  
}   
.dark-theme div{  
    background:grey  
}

任何帮助表示赞赏。

标签： cssless

解决方案

像这样的问题...

...（“我正在学习一门语言 X，我发现了一些用语言 Y 编写的程序，看起来像我需要的。如何使用 X 做同样的事情？”）几乎不可能回答（而且对于) SO 格式，只要片段超出单个独特的简约语句/功能。

无论哪种方式，不要让 Q 没有答案：为了能够在 Less 中编写类似的代码，您需要熟悉以下功能：

回答如何做一些background: .theme(backgroundColor)你需要做的事情需要从头开始解释所有这些（即将答案变成一本书或一个非常冗长的教程）。从技术上讲，您真的不能错过链接片段中的代码比 .waaaaay 更复杂background: .theme(backgroundColor)。

这是一个（简约的）不太等价的 CodePen 你指出的片段。（那里没有评论。它们毫无意义，因为它没有发生任何魔法 - 要了解它的作用，您只需要熟悉我上面列出的语言功能）：

@theme: {
    @light: {
        backgroundColor: white;
        textColor: #408bbd;
    }
    @dark: {
        backgroundColor: #222;
        textColor: #ddd;
    }
}

// ....................................
// usage:

.themify({
    div {  
        background: .theme[backgroundColor]; 
    }

    span {  
        color: .theme[textColor]; 
    }

    // etc.
}); 

// ....................................
// impl.:

.themify(@style) {
    each(@theme, {
        @name: replace(@key, '@', '.');
        .theme() {@value()}
        @{name}-theme {@style()}      
    });
}

有关与类似“主题”用例相关的其他可能技术和解决方案，另请参阅：

推荐阅读