您好,以下是您需要翻译的内容:
您的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不支持属性嵌套。
datalist-item
),而不是其中的属性。我认为目前Less不支持这种类型的扩展。 - Harryextend
。在“预期结果”中,这些类中没有任何重复的属性。因此不需要使用extend
。 - seven-phases-max