不像 Sass 那样扩展

Question

我喜欢在 Less like I can do it in Sass 中使用 :extend()。

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

Less 中的示例：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 Selectors，这是一种特殊的扩展形式，在 Less 中不存在。

首先是“正常”扩展：

SCSS：

.class {
p: 1;
}
.class2 {
@extend .class;
}

和更少：

.class {
p: 1;
}
.class2 {
&:extend(.class);
}

都编译成：

.class,
.class2 {
  p: 1;
}

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

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

%class {
 p: 1;
}

.class2 {
@extend %class;
}

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

.class2 {
   p: 1; }

Sass 文档告诉你：

@extend-Only 选择器

有时你会为一个你只想写的类写样式 @extend，并且永远不想直接在您的 HTML 中使用。这是 在编写 Sass 库时尤其如此，您可以在其中提供 样式供用户在需要时@extend，如果不需要则忽略。

如果你为此使用普通类，你最终会创建很多额外的 生成样式表时的 CSS，并存在冲突的风险 与 HTML 中使用的其他类。这就是为什么萨斯 支持“占位符选择器”（例如，%foo）。

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

在 Less 中，您将有两个选项来生成不生成输出的代码：

1) 使用 mixin，mixins 不生成输出：

.class() {
p: 1;
}
.class2 {
.class();
}

输出：

.class2 {
   p: 1; 
}

2) 将不应输出的类放在不同的文件中，并使用 reference kewyword 导入此文件：

file1.less:

.class {
p: 1;
}

file2.less:

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

lessc file2.less 现在将输出：

.class2 {
   p: 1; 
}

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

.datalist-item {
  display: block;

  &-term {
  font-weight: normal;
  }

  &-description {
  font-weight: bold;
  }

  .datalist-float & {
  display: inline-block;

      &:not(:last-of-type) {
      margin-right: 1em;
      padding-right: 1em;
      border-right: 1px solid;
      }  

  }

}

编译成：

.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;
}

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

 border: {
     right: 1px solid;
 };

应该编译成：

border-right { 
1px solid; 
}

Less 不支持属性嵌套。