在Less中扩展像Sass一样能做到吗?

4

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

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,但这看起来很丑 :(


似乎SASS只扩展选择器(datalist-item),而不是其中的属性。我认为目前Less不支持这种类型的扩展。 - Harry
此外,Less目前无法扩展通过连接形成的选择器 - https://dev59.com/i4Hba4cB1Zd3GeqPVL7N#26450099 - Harry
1
我不明白为什么在这种情况下要使用 extend。在“预期结果”中,这些类中没有任何重复的属性。因此不需要使用 extend - seven-phases-max
1
另外说到通过变量重复使用相同的选择器名称粒子,您可以在`item - [demo](https://gist.github.com/seven-phases-max/733851e3357776f32d33)中使用相同的技巧,这样我想知道它是否比“qEeQPG”中的代码更难看。 - seven-phases-max
1个回答

5
您好,以下是您需要翻译的内容:

您的Sass(SCSS)示例使用@extend-Only Selectors,这是一种Less中不存在的特殊形式的扩展。

首先是“普通”扩展:

SCSS:

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

并且使用Less:

.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-只有选择器

有时,你会为一个类编写样式,但你只想@extend它,从不直接在HTML中使用它。当编写Sass库时,这尤其正确,因为你可以为用户提供他们需要的样式,如果他们不需要则可以忽略。

如果你使用普通类来实现这一点,那么在生成样式表时会创建大量额外的CSS,并且可能与在HTML中使用的其他类发生冲突。这就是为什么Sass支持“placeholder selectors”(例如,%foo)。

Placeholder selectors看起来像类和id选择器,只是#或.被%替换。它们可以用于任何类或id可以用的地方,而且单独使用时,它们会防止规则集被渲染到CSS中。

在Less中,你有两个选项可以让代码不生成输出:

1)使用mixin,mixin不会生成输出:

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

输出:

.class2 {
   p: 1; 
}

2) 将不应输出的类放在一个不同的文件中,并使用 reference 关键字导入此文件:

file1.less:

.class {
p: 1;
}

file2.less:

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

lessc file2.less现在会输出:

.class2 {
   p: 1; 
}

但是我同意评论中的@seven-phases-max的观点。在您的示例中,没有必要使用extend。 @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不支持属性嵌套。


很好的解释。代码格式有点混乱的具体原因是什么? - Harry
抱歉,但我已经知道这些了。我想要使用@extend占位符的主要原因是为了不重复选择器名称。DRY。 - Даниил Пронин
在你的例子中,你可以使用一个双重引用 &-float &,参见:http://codepen.io/anon/pen/gpPaGK - Bass Jobsen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接