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

Question

在我的 style.less 中，我想定义所有带有 class .element 的元素嵌套在 class .group 的元素中具有 bootstrap-class .col-sm-6.

相同的属性

不幸的是，我无法直接将 class .col-sm-6 添加到元素中。

在该项目中，bootstrap 在与我的 style.less 相关的文件夹 tapestry5/bootstrap/css/bootstrap-darkly.css 中可用。（如何）我也可以在我的 style.css 中使用 CSS-classes 作为混入吗？我试过了：

@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 用作混入，或者我的语法有问题？

Answer 1

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

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

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

Answer 2

如果您要使用 Bootstrap LESS，您不妨使用他们的 mixin 而不是他们的 CSS。正如 seven-phases-max 在他的评论中所建议的那样，您可以使用 make-*-column 而不是 CSS 类.

你会这样做：

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

Can I use css-classes as a mixin in a less-file?