我可以在 less-file 中使用 css-classes 作为 mixin 吗？答案

【问题标题】：Can I use css-classes as a mixin in a less-file?我可以在 less-file 中使用 css-classes 作为 mixin 吗？
【发布时间】：2015-05-13 00:25:13
【问题描述】：

在我的style.less 中，我想定义，所有嵌套在.group 类元素中的类.element 的元素都具有与引导类.col-sm-6 相同的属性。

很遗憾，我不能直接将 .col-sm-6 类添加到元素中。

在该项目中，引导程序位于文件夹 tapestry5/bootstrap/css/bootstrap-darkly.css 中，与我的 style.less 相关。（如何）我也可以在我的style.css 中使用 CSS 类作为 mixins 吗？我试过了：

@import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.css";

.group .element {
  .col-sm-6;
}

不幸的是，我得到了一个 Less4J 异常：

Could not find mixin named ".col-sm-6". - line 4 - position 3

是否无法将 CSS 用作 mixins，还是我的语法有问题？

【问题讨论】：

.col-sm-6（以及类似的列类）是在相应的媒体查询块内定义的，因此它不能作为该块范围外的混合使用。通常在这些情况下，您需要使用 Bootstrap 源提供的make-*-column mixins。尽管在您的特定情况下使用extend而不是mixin应该可以解决问题（即&:extend(.col-sm-6);，因为extend将当前选择器附加到扩展的选择器，它允许指向在全局范围内的媒体查询块中定义的选择器)。

【解决方案1】：

如果您将css 文件更改为less 文件结尾并导入它（因为所有CSS 都是有效的LESS）。 less 编译器将能够找到并使用 .col-sm-6 作为 mixin。

@import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.less";

.group .element {
  .col-sm-6;
}

【讨论】：

【解决方案2】：

如果你打算使用 Bootstrap LESS，你也可以使用他们的 mixin 而不是他们的 CSS。正如他的评论中所建议的 7-phases-max，您可以使用 make-*-column 而不是使用 CSS 类。

你应该这样做：

.group .element {
  .make-sm-column(6);
}

【讨论】：