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

Question

我想知道是否有人找到了用更少的文件创建不同的CSS文件的方法。

在我的上下文中，我创建了另一个少客户文件。 该文件包含一系列变量，这些变量及其设置用于特定颜色的主题和其他CSS指令。

对于默认设置，我的文件也较少。

这里是less文件夹的代表

• 更少的文件夹
  • 我的文件夹少了
    • 特定于我的上下文的所有样式
• 客户默认

• 无客户

  我想从“我的较少文件夹”中编译两个不同的CSS，第一个将在变量中使用customer.default.less文件。 第二个将使用customer.less文件。 创建customer.default.css和customer.css。 为了使customer.css和customer.default.css始终同步在一起。

我目前在webstorm中使用编译器插件。 我在使用正确的工具吗？

谢谢

Answer 1

如果您使用“控制” Less文件，则确实可以从Less文件产生多个CSS输出。

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

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

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

现在，我们要生成一个辅助样式表（以根据需要输出“ customer.default.css”或“ customer.css”）-我们导入主Less并覆盖其变量：

/* 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 ）

Answer 2

我认为您可以使用Gruntfile中 grunt-contrib-less 包含 grunt-contrib-less GruntJS任务来完成此任务 。

less: {
  development: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  },
  production: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  }
}

LESS并不是我的本事，但使用足够多的Sass和grunt-contrib-sass任务时，我假设将存在相同的功能集。