Css 关于@import行为的混淆较少，使用Codekit

目前正在使用引导、使用Codekit编译，并且还有一个单独的样式。我正在使用的样式较少

在variables.less中：

@blue: #0096EF;

在style.less中，我有以下内容：

.title-text {color: @blue;}
@import: "variables.less";

在bootstrap.less中：

@import: "style.less";
@import: "variables.less";

---

我这样做对吗？在我看来，当编译引导程序时，它会导致variables.less出现两次。

您应该能够在引导程序中导入variables.less一次作为第一个导入实例，并且不在实际样式中包含第二次。less。因为您的假设是正确的，所以它将再次导入variable.less。这意味着您正在两个位置导入相同的变量

另外，只要在访问变量本身之前导入定义您将要使用的变量的variables.less，您就可以了

@color-black: #000;

.color {
      color: @color-black;
}

---

我发现这也是一个Codekit问题，因为我正在使用Codekit编译更少的文件

解决方案：

创建style.less并按预期进行编辑，参考@blue variable （未在当前文档中声明）

保存时，Codekit返回一个编译错误，原因是在style.less中未声明变量。忽略错误

在bootstrap.less

@import

style.less中

保存bootstrap.less，编译时不会出现问题

在html文档中调用bootstrap.css

---

顺便说一句，我在第2步和第3步之间遇到了一个代码包错误。步骤2之后，Codekit不再监视或编译任何内容。要解决这个问题，我需要删除关注的项目，然后将其重新添加到Codekit。

您应该能够导入变量。在引导过程中，作为第一个导入实例，只需很少一次。因为从另一个角度来说，你告诉更少的东西来编译带有所有依赖项的引导程序，加上所有依赖项和它的依赖项的引导程序，就我所知，这不是一个很好的冗余证明过程。简言之，我的意思是，在这个设置中，你告诉更少的东西来包含变量。更少的两次，在两个不同的编译点。好的！到目前为止，我一直在关注这一点（感谢您的补充澄清）。接下来，我想在style.less中引用

@blue

。既然

@blue

已经在变量中声明，那么最有效的方法是什么呢？问题是，您是否遵循twitter引导/锅炉板当前的导入模式？如果需要的话，创建一个JSFIDLE来传达这一点。不确定他们当前的导入模式是什么意思。你是说我应该把style.less导入bootstrap.less吗？好的。假设我只将变量.less导入引导。如何引用styles.less中variables.less中声明的变量？@OllyF如果您认为答案有用，请接受它。看起来没有其他人会参与进来。谢谢。嘿，实际上我自己更详细地解决了这个问题，但是Stackoverflow直到24小时后才让我发布答案（因为我的重复次数不到100次）。我对你的答案投了赞成票，但如果有人遇到同样的问题，这并不能完全解决问题。我的解决方案如下。虽然现在我已经发布了它，但显然我必须等待24小时才能接受它。如果这是一个特定于环境的问题，请修改您的问题和描述，这样才更有意义。