css - 将 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 文件，该文件是可变控制的，因此该文件定期更新，并且一个这是很少更新的静态(或“硬编码”)。这是我最接近的编码。它当然不是自动的，但确实在其功能方面提供了一些“一致性”。

考虑...

LESS 变量和主文件

// 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，我将上述 mixin 设置为全部调用，因此您可以在测试时的任一文件:

@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;
}