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

我正在创建一个主要使用HTML和CSS的小型个人项目，但是我对此并不陌生，并且遇到了一些问题。我想使用W3.CSS框架，但是我不想在html文件（例如<div class="w3-container">...）中显式使用它，因为我以后可能想使用其他东西，并且不想重构每个文件。谷歌搜索，我了解到less mixins的想法，我想使用自己的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

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

为什么不起作用？

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

谢谢。

最佳答案

问题1

关于错误：

NameError：.w3-容器在第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的错误。

关于html - 在外部文件W3.css中用类创建LESS mixin，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36818677/