像 Sass 一样以 Less 方式扩展

Question

我喜欢在 Less 中使用，:extend()就像在 Sass 中一样。

SCSS 中的示例：http ://codepen.io/Grawl/pen/qEeQPG

更少的示例： http: //codepen.io/Grawl/pen/qEeQpz（未工作）

预期输出：

.datalist-item {
  display: block;
}
.datalist-item-term {
  font-weight: normal;
}
.datalist-item-description {
  font-weight: bold;
}
.datalist-float .datalist-item {
  display: inline-block;
}
.datalist-float .datalist-item:not(:last-of-type) {
  margin-right: 1em;
  padding-right: 1em;
  border-right: 1px solid;
}

目的是不自我重复，因此如果我在 Sass 中重命名一个类，我不必重命名其他类。

我知道我可以将根类放入一个变量中并使用它两次http://codepen.io/Grawl/pen/qEeQpz但它看起来很丑:(

Answer 1

您的 Sass (SCSS) 示例使用@extend-Only 选择器，这是某种特殊形式的扩展，Less 中不存在。

\n\n

首先是“正常”扩展：

\n\n

社会保障体系：

\n\n

.class {\np: 1;\n}\n.class2 {\n@extend .class;\n}\n

\n\n

以及更少：

\n\n

.class {\np: 1;\n}\n.class2 {\n&:extend(.class);\n}\n

\n\n

两者都编译为：

\n\n

.class,\n.class2 {\n  p: 1;\n}\n

\n\n

在 Less 中.class2 { &:extend(.class); }也可以写成.class2:extend(.class1){}

\n\n

现在考虑以下使用 @extend-Only 选择器的 SCSS 代码：

\n\n

%class {\n p: 1;\n}\n\n.class2 {\n@extend %class;\n}\n

\n\n

上述代码编译成CSS代码如下：

\n\n

.class2 {\n   p: 1; }\n

\n\n

Sass 文档告诉你：

\n\n

\n

@extend-Only 选择器

\n\n

有时，您\xe2\x80\x99 会为您只想@extend 的类编写样式，而不想直接在HTML 中使用。在编写 Sass 库时尤其如此，您可以为用户提供样式，以便在需要时@extend，如果不需要则忽略。\xe2\x80\x99t。

\n\n

如果为此使用普通类，则在生成样式表时最终会创建大量额外的 CSS，并且存在与 HTML 中使用的其他类发生冲突的风险。这就是为什么 Sass\n 支持 \xe2\x80\x9c 占位符选择器\xe2\x80\x9d（例如，%foo）。

\n\n

占位符选择器看起来像类和 id 选择器，除了 #\n 或 . 被替换为%。它们可以在类或 id 可以使用的任何地方使用，并且它们本身可以防止规则集呈现为 CSS。

\n

\n\n

在 Less 中，您将有两种选择来获得不生成输出的代码：

\n\n

1）使用mixin，mixin不生成输出：

\n\n

.class() {\np: 1;\n}\n.class2 {\n.class();\n}\n

\n\n

输出：

\n\n

.class2 {\n   p: 1; \n}\n

\n\n

2）将不应输出的类放在不同的文件中，并使用referencekewyword 导入该文件：

\n\n

文件1.less：

\n\n

.class {\np: 1;\n}\n

\n\n

文件2.less：

\n\n

@import (reference) "file1";\n.class2 {\n&:extend(.class);\n}\n

\n\n

lessc file2.less现在将输出：

\n\n

.class2 {\n   p: 1; \n}\n

\n\n

但我首先同意评论中的@seven-phases-max。在您的示例中，无需使用扩展。@seven-phases-max 向您展示了一些解决此用例的示例。或者您可以考虑；使用父引用更改选择器顺序，这应该在Less和 SASS 中都有效：

\n\n

.datalist-item {\n  display: block;\n\n  &-term {\n  font-weight: normal;\n  }\n\n  &-description {\n  font-weight: bold;\n  }\n\n  .datalist-float & {\n  display: inline-block;\n\n      &:not(:last-of-type) {\n      margin-right: 1em;\n      padding-right: 1em;\n      border-right: 1px solid;\n      }  \n\n  }\n\n}\n

\n\n

编译成：

\n\n

.datalist-item {\n  display: block;\n}\n.datalist-item-term {\n  font-weight: normal;\n}\n.datalist-item-description {\n  font-weight: bold;\n}\n.datalist-float .datalist-item {\n  display: inline-block;\n}\n.datalist-float .datalist-item:not(:last-of-type) {\n  margin-right: 1em;\n  padding-right: 1em;\n  border-right: 1px solid;\n}\n

\n\n

最后请注意，您正在使用属性的嵌套，例如：

\n\n

 border: {\n     right: 1px solid;\n };\n

\n\n

应该编译成：

\n\n

border-right { \n1px solid; \n}\n

\n\n

Less 不支持属性嵌套。

\n