Less 尽量少用Sass的方式扩展

我喜欢在Sass中使用

：extend（）

SCSS中的示例：

例如：（未工作）

预期产出：

.datalist项{
显示：块；
}
.数据列表项术语{
字体大小：正常；
}
.datalist项目说明{
字体大小：粗体；
}
.datalist浮动.datalist项{
显示：内联块；
}
.datalist浮动。datalist项：非（：类型的最后一个）{
右边距：1米；
右侧填充：1em；
右边框：1px实心；
}

您的Sass（SCSS）示例使用的是一种特殊的扩展形式，它在Less中不存在

首先是“正常”延伸：

SCSS：

及以下：

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

两者都编译成：

.class,
.class2 {
  p: 1;
}

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

在Less

中，{&:extend（.class）；}

也可以写成

.class2:extend（.class1）{}

现在考虑下面的SCSS代码，它使用@扩展唯一选择器：

%class {
 p: 1;
}

.class2 {
@extend %class;
}

前面的代码编译为CSS代码，如下所示：

.class2 {
   p: 1; }

Sass文档告诉您：

@仅扩展选择器

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

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

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

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

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

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

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

产出：

.class2 {
   p: 1; 
}

2） 将不应输出的类放在其他文件中，并使用

引用导入此文件

kewyword:

无文件：

.class {
p: 1;
}

file2.less：

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

lessc file2.less现在将输出：

.class2 {
   p: 1; 
}

但我首先同意@seven phases max的评论。在您的示例中，不需要使用extend@seven Phase max向您展示了一些解决此用例的示例。或者你可以考虑；使用父引用更改选择器顺序，这应在和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;
      }  

  }

}

编译成：

.class,
.class2 {
  p: 1;
}

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

应汇编成：

.class,
.class2 {
  p: 1;
}

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

Less不支持属性嵌套。
似乎SASS只扩展了选择器（
datalist项
），而不扩展其中的属性。我认为这种扩展在Less Current中是不可能的。而且，Less Current无法扩展通过串联形成的选择器-我不明白为什么在这种用例中使用
extend
。
预期结果中的任何类中都没有重复属性。另外，说到通过变量重新使用相同的选择器名称particle，您可以对
项使用相同的东西，这样我想知道它是否比
qEeQPG
中的代码更难看。很好的解释。代码格式有点混乱，有什么具体原因吗？对不起，我已经知道了。我想扩展占位符的主要原因是不要在选择器名称中重复。干式。在您的示例中，您可以使用双&reference
和-float&
，请参阅：