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

Question

我正在创建一个主要使用 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

我可能没有按预期使用 less。我看了其他问题，例如this one但做不到。我还注意到我的 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 is undefined in on line 3, column 2

您已将 .w3-container 用作混入，但混入尚未定义。您需要像这样定义混合:

@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，并且会抛出 Question part 1 的错误，因为那里没有使用名称 .w3-container 定义的 mixin。