Question

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

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

我的默认设置文件也少了。

这里是less文件夹的表示

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

我想从＆＃34;我的少文件夹＆＃34;中编译两个不同的CSS。第一个将在变量中使用customer.default.less文件。第二个将使用customer.less文件。创建customer.default.css和customer.css。为了让customer.css和customer.default.css一路同步。

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

由于

Answer 1

如果你使用＆＃39; control＆＃39;你可以从Less文件中生成多个CSS输出。文件少。

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

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

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

现在，我们想要制作一个辅助样式表（根据您的喜好输出＆＃39; customer.default.css＆＃39;或＆＃39; customer.css＆＃39;）我们导入主要的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使用lazy loading。

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

（另外，我会将两个变量声明块分成他们自己的Less文件 - 可能是theme-variables-default.less和theme-variables-override-a.less）

Answer 2

我认为您可以使用grunt-contrib-less GruntJS task在Gruntfile中使用类似的内容来完成此操作。

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任务我会假设存在相同的功能。

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

2 个答案: