将LESS输出拆分为两个文件 - 变量和常量

Question

我在LESS实现中使用了大量变量，但显然很多规则都是硬编码的。变量在编译时由包含我的样式定义的LESS文件定义。

是否可以将LESS输出的所有CSS规则拆分为可变部分和常量部分，而无需手动创建两个单独的文件？

所以：

@myColour: white;
.foo {
   background-colour: @myColour;
   width: 120px;
}

成为两个文件：

.foo {
   background-colour: white;
}

和

.foo {
   width: 120px;
}

这样，如果主题发生变化，只需要重新加载变量。

有什么想法吗？

由于

Answer 1

简答：否

“没有手动创建两个单独的文件？” （重点补充），答案是“不。”

程序员必须编写两个单独的文件，一个包含变量调用，另一个包含“硬编码”信息（尽管请参见下面的更新）。但我不建议这样做，因为它很难维护（至于看到两个不同文件中的两个不同.foo条目发生了什么）。这可能就是为什么你希望在编码后自动分割它们，但这是不可能指示LESS将变量属性值输出到一个文件而硬编码到另一个文件，至少，不是自动...

更新：我能得到的最近的

如果我理解你想要什么，你想要一个文件进行编码，将各种选择器定义一次，但是具有能够分割成可变控制的css文件的属性，因此该文件定期更新，并且那是很少更新的静态（或“硬编码”）。这是我最接近编码的。它当然不是自动的，但确实提供了它的功能“一致性”。

考虑...

少量变量和主文件

// assume this is your variables file (variables.less)
@myColour: white;

// assume this is a master coding file, but it keeps all the properties
// "hidden" in nested mixins labled props()
// This file imports your variables.less file
// Note that the @file variable is NOT in the variables.less file, but
// is in the particular files used to split the code.
// We will call this file master.less

@import variables.less;

.foo {
  .props() when (@file = var), (@file = all) {
    background-colour: @myColour;
  }
  .props() when (@file = static), (@file = all) {
    width: 120px;
  }
  & > p.nested {
    .props() when (@file = var), (@file = all) {
       background-colour: @myColour;
    }
    .props() when (@file = static), (@file = all) {
       margin: 1em;
    }
    .props(); // call the props, each nesting needs its own props() call.
  }
  .props(); // call the props
}

生成少量静态文件

// Assume this is your desired static only file, called staticCSS.less
// It has imported the master coding file to access mixins
// and all code is produced by setting the local @file variable in it

@import master.less;
@file: static; // only static css will output

CSS静态文件输出

.foo {
  width: 120px;
}
.foo > p.nested {
  margin: 1em;
}

生成少量变量控制文件

// Assume this is your desired variable controlled file, called variableCSS.less
// It has imported the master coding file to access mixins
// and all code is produced by setting the local @file variable in it

@import master.less;
@file: var; // only variable css will output

CSS变量控制文件输出

.foo {
  background-colour: #ffffff;
}
.foo > p.nested {
  background-colour: #ffffff;
}

生成所有属性

出于测试目的，或者只是为了更好地查看文件的总组合输出，如果设置了@file: all，我将上述mixins设置为all，因此您可以在测试时在任一文件中执行此操作：

@import master.less;
@file: all; //all css will output

CSS变量控制文件输出

.foo {
  background-colour: #ffffff;
  width: 120px;
}
.foo > p.nested {
  background-colour: #ffffff;
  margin: 1em;
}

该类仍可完全用作mixin本身，或可扩展（LESS 1.4）

添加以下作品（此处为@file: static制作）：

.test {.foo }
.test2 {&:extend(.foo all);}

CSS输出

.foo,
.test2 {
  width: 120px;
}
.foo > p.nested,
.test2 > p.nested {
  margin: 1em;
}
.test {
  width: 120px;
}
.test > p.nested {
  margin: 1em;
}