從相同的較少文件創建不同的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任務時，我假設將存在相同的功能集。