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

Question

我正在创建一个主要使用 HTML 和 CSS 的小型个人项目，但我是新手，遇到了一些问题。我想使用 W3.CSS framework but I don't want to explicitly use it in the html files (like <div class="w3-container">...) because I might want to use something else later and don't want to refactor every file. Googling I learned about less mixins 我想使用我自己的 style.less 文件并从那里导入 w3.css 并继承，例如，.w3-container class for header 标签，我认为仅用 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 但事实并非如此。

为什么不起作用？

还有什么其他方法可以避免显式使用 classes，例如 "w3-container"？

谢谢。

Answer 1

问题第 1 部分

关于错误：

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

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

@import "w3.css";

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

header {
  .w3-container;
}

然而，使用 mixin 听起来不像是您的目标。

问题第 2 部分

关于您的评论：

还有什么其他方法可以避免显式使用 classes，例如 "w3-container"

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

header {
    color: blue;
}

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

section {
    header {
        color: orange;
    }
}

这将编译为 CSS:

section header {
    color: orange;
}

问题第 3 部分

当您尝试以特定 class 的元素实例为目标时，重要的是在 class 前加上 & 和包括用于定义属性的括号，如下所示：

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

这将编译为以下 CSS:

header.w3-container { color: orange; }

如果你单独使用 .w3-container;，LESS 会假设你想在这里使用 mixin，并会从 Question 部分抛出错误1 因为没有用名称 .w3-container.

定义的混入

Answer 2

@import (less) "w3.css";

header {
  .w3-container;
}

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

Create LESS mixin with class in external file W3.css

html

css

inheritance

mixins

less