地图和主题

Question

我刚开始使用 CSS 预编译器并开始使用 Less。我找到 Sass 代码将主题添加到我的 Web 应用程序并且效果很好。

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

我正在尝试将其转换为 Less 并且难以重写它。我已经阅读了 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  
}

感谢任何帮助。

Answer 1

试试这个代码

@light: #f9f9f9;
@dark: #333333;
.theme(@theme: @color, @background: @background) {
  color: @theme;
  background: @background;
  a {
    color: @theme;
  }
}

.light-theme {
  .theme(@theme: @light, @background: @dark);
}

.dark-theme {
  .theme(@theme: @dark, @background: @light)
}

<div class="light-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>

<div class="dark-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>

Answer 2

这样的问题...

... ("I'm learning a language X and I found some program in language Y that looks like what I need. How to do the same thing using X?") 几乎不可能在 SO 格式中回答（并且对于）SO 格式来说太宽泛了，只要该片段超出了单个独特的简约 statement/feature.

无论如何，不要让问题无人回答：为了能够在 Less 中编写类似的代码，您需要熟悉以下功能：

Maps
Rulesets as values/parameters
加上所有典型的语言基本设施，如变量、函数、作用域等，以及最后一个（但并非最不重要的）Mixins.

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

复杂得多。

这里有一个（简约的）Less 等同于您指向的 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()}      
    });
}

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

Variables based on ancestor class
How to thematize in ...
还有其他Q/Aslinked/referenced那里。

地图和主题

Maps and themes

css

less