在外部文件W3.css中用类创建LESS mixin

Question

我正在创建一个主要使用HTML和CSS的小型个人项目，但是我对此并不陌生，并且遇到了一些问题。 我想使用W3.CSS框架，但是我不想在html文件中明确使用它（例如<div class="w3-container">... ），因为我以后可能想使用其他东西，而不要不想重构每个文件。 谷歌搜索，我了解到较少的mixin，我有使用我自己的style.less文件的想法，然后从那里导入w3.css并继承，例如，.w3-container类用作标头标记，我相信仅靠CSS不能做到。 无论如何，我想做的是：

@import "w3.css";
header {
  .w3-container;
}

这两个文件“ style.less”和“ w3.css”都位于同一文件夹中，我使用以下命令尝试对其进行编译：

lessc style.less style.css

输出错误：

NameError: .w3-container is undefined in <path to style.css> on line 3, column 2

我可能没有少用它应该的样子。 我看了其他问题，例如这个问题，但是不能解决。 我还注意到我的node.js和npm确实过时了： node: v0.12.4, latest: v5.11.0 npm: 2.10.1, latest: 3.8.7但是不是。

为什么不起作用？

我还有什么其他方法可以避免显式地使用“ w3-container”之类的类？

谢谢。

Answer 1

问题1

关于错误：

NameError：.w3-container在第3行第2列中未定义

您已将.w3-container用作mixin，但尚未定义mixin。 您需要像这样定义mixin：

@import "w3.css";

.w3-container() {
   /*Styles to apply to the mixin would go here*/
}

header {
  .w3-container;
}

但是，听起来并不像使用mixin实际上是您的目标。

问题2

关于您的评论：

还有什么其他方法可以避免显式使用“ w3-container”等类

LESS可以编译为CSS，因此除了提供一些扩展功能以减少重复并使代码更易于维护之外，LESS在选择器（例如别名W3.css）方面没有提供任何魔术。 如果您不想添加新的CSS类，则您的选择仅限于使用具有更高特异性的有效CSS选择器。 下面的示例基于路径。 如果w3.css包含：

header {
    color: blue;
}

然后要将目标放在节中，可以使用更具体的选择器（在LESS中）：

section {
    header {
        color: orange;
    }
}

这将编译为CSS：

section header {
    color: orange;
}

问题第3部分

当您尝试将特定类的元素的实例作为目标时，在类的前面加上＆并包括方括号，以定义样式样式的属性是很重要的：

header {
  &.w3-container {
    color: orange;
  }
}

这将编译为以下CSS：

header.w3-container { color: orange; }

如果使用.w3-container; LESS本身将假设您要在此处使用mixin，并且由于没有定义名称.w3-container的mixin，因此将抛出问题1的错误。

Answer 2

@import (less) "w3.css";

header {
  .w3-container;
}