Question

我正在创建一个主要使用HTML和CSS的小型个人项目，但我是新手并遇到一些问题。我想使用W3.CSS框架，但我不想在html文件中明确使用它（例如<div class="w3-container">...），因为我可能想稍后使用其他内容而不是想要重构每个文件。谷歌搜索我了解less mixins我有想法使用我自己的style.less文件，并从那里导入w3.css和继承，例如，.w3-容器类的标头标签，我认为不能用只有CSS。无论如何，我想要做的是：

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

两个文件，＆＃34; style.less＆＃34;和＆＃34; w3.css＆＃34;，在同一个文件夹中，我使用以下命令尝试编译它：

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但是它不是。

为什么它不起作用？

我还有什么方法可以避免明确使用＆＃34; w3-container＆＃34;等类？

感谢。

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部分

关于你的评论：

我可以采用其他方式避免明确使用＆＃34; w3-container＆＃34;

等类

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

header {
    color: blue;
}

然后，要在某个部分中定位标题，您可以使用更具体的选择器（在LESS中）：

section {
    header {
        color: orange;
    }
}

这将编译为CSS：

section header {
    color: orange;
}

问题第3部分

当您尝试定位特定类元素的实例时，必须在类前面添加＆amp; 并包含用于定义样式属性的括号，如此：

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

这将编译为以下CSS：

header.w3-container { color: orange; }

如果您单独使用 .w3-container; ，LESS将假设您要在此处使用mixin，并将从问题第1部分中抛出错误，因为那里没有使用名称 .w3-container 定义的mixin。

Answer 2

@import (less) "w3.css";

header {
  .w3-container;
}

在外部文件W3.css中创建LESS mixin和class

2 个答案: