LessCss - 创建主题（也就是使用不同变量的css文件）

Question

我有以下文件结构：

• main.less
• 模块
  • colors.less
  • header.less
  • footer.less
  • video_player.less
  • reset.less
  • base.less

---

colors.less看起来像：

@brand-primary-color: orange;
@brand-secondary-color: grey;

---

我想在colors.less中导入main.less，并在较少的文件中使用全局变量。

创建主题看起来像这样：

• 品牌1.less

  @import "themes/brand-1-colors.less"

• brqand-2.less

  @import "themes/brand-2-colors.less"

• 品牌3.less

  @import "themes/brand-3-colors.less"

• [...]

---

无法找到任何办法！

唯一可行的方法是在每个较少的子文件中导入colors.less文件。这使得创建主题有点乏味......

---

有什么想法吗？ :)谢谢你们！

Answer 1

假设main.less中包含CSS，您只需创建一个文件，然后导入所有其他less文件。文件结构如下所示：

• final.less
  • 模块
    • main.less
    • colors.less
    • header.less
    • footer.less
    • video_player.less
    • reset.less
    • base.less

编译完成后，final.css将是包含所有内容的CSS文件。 final.less看起来像是：

@import "main.less";
@import "colors.less";
@import "header.less";
@import "footer.less";
@import "video-player.less";
@import "reset.less";
@import "reset.less";

最后但并非最不重要的是，您应该只编译final.less。