2

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

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

所以：

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

变成两个文件：

.foo {
   background-colour: white;
}

和

.foo {
   width: 120px;
}

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

有任何想法吗？

谢谢

4

1 回答 1

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
}

生成 LESS 静态文件

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

生成 LESS 变量控制文件

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

生成所有属性

出于测试目的，或者只是为了更好地查看文件的总组合输出，我将上述 mixins 设置为全部调用 if@file: 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;
}
于 2013-07-25T18:15:21.887 回答