地图和主题

Question

我是新手使用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  
}  

任何帮助表示赞赏。

Answer 1

像这样的问题......

...（“我正在学习一门语言X，我发现一些语言Y的程序看起来像我需要的。如何使用X做同样的事情？”）几乎不可能回答（并且太宽泛了一旦代码片段超出了单个不同的简约语句/特征，就会出现SO格式。

---

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

• Maps
• Rulesets as values/parameters
• 加上所有典型的语言基本设施，如变量，功能，范围等等，以及最后（但并非最不重要）Mixins。

回答如何制作像background: .theme(backgroundColor)这样的东西来做你需要的东西需要从头开始解释所有这些（即把答案变成一本书或一本非常低级的教程）。从技术上讲，你不应该真的错过链接片段中的代码比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()}      
    });
}

---

对于与类似“主题”用例相关的其他可能的技术和解决方案，另见：

• Variables based on ancestor class
• How to thematize in ...
• 和其他Q / As链接/引用那里。

Answer 2

试试这个代码

@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>