从相同的较少文件创建不同的CSS文件

Question

我想知道是否有人找到了一种方法来从相同的较少的文件创建不同的CSS文件.

在我的上下文中,我创建了一个不同的客户文件.此文件包含一系列变量,其中包含特定颜色主题和其他CSS指令的设置.

我还有一个较少的文件用于默认设置.

这里是less文件夹的表示

• 少文件夹
  • 我的文件夹少了
    • 所有特定于我的上下文的样式
• customer.default.less

• cutomer.less

  我想从"My less folder"编译两个不同的css,第一个将在变量中使用customer.default.less文件.第二个将使用customer.less文件.创建customer.default.css和customer.css.为了让customer.css和customer.default.css一路同步.

我目前正在使用webstorm中的编译器插件.我使用合适的工具吗？

谢谢

Answer 1

如果使用"控制"较少的文件,您确实可以从Less文件生成多个CSS输出.

例如,这是我们用于网站的主要样式表:

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

现在,我们要产生二次样式表(输出"customer.default.css",或"customer.css"为您喜欢) - 我们导入了少主并覆盖其变量:

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

请注意,我们不定义任何规则或在此处设置的任何样式,只覆盖的变量.

以下是输出CSS文件:

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

这是可能的,因为Less使用延迟加载.

确保禁用文件观察程序设置"仅跟踪根文件"; 否则我们示例中的主样式表将不会产生任何输出css.

(另外,我会将两个变量声明块分成它们自己的Less文件 - 也许是theme-variables-default.less和theme-variables-override-a.less)