如何扩展一个具有动态形成选择器的类/ mixin [英] How do I extend a class/mixin which has dynamically formed selector

问题描述

如何扩展Less类，使用&

  .hello-世界{
 color：red; 
} 
 
 .foo {
&：extend（.hello-world）; 
 font-size：20px; 
} 
  

预期的CSS输出：

  .hello-world，
 .foo {
 color：red; 
} 
 .foo {
 font-size：20px; 
} 
  

减少不会产生预期输出：

  .hello {
& -world {
 color：red; 
} 
} 
 
 .foo {
&：extend（.hello-world）; 
 font-size：20px; 
} 
  

意外的CSS输出：

  .hello-world {
 color：red; 
} 
 .foo {
 font-size：20px; 
} 
  

解决方案

形成的选择器（松散使用该术语）就像目前不可能在Less。有一个开放的功能请求来支持此功能。

$ b

选项1： $ b

将 .hello 和 .hello-world 选择器的内容写入单独的Less文件 test.less ），编译它以获取CSS。为 .foo 的规则创建另一个文件，将编译的CSS导入为Less文件（使用（less）指令），然后扩展 .hello-world ，就像你最初想要的那样。

减少：

  .hello {
& -world {
 color：red; 
} 
} 
  

extended-rule.less： strong>

  @import（less）test.css; 
 .foo {
&：extend（.hello-world）; 
 font-size：20px; 
} 
  

编译的CSS：
$ b

  .hello-world，
 .foo {
 color：red; 
} 
 .foo {
 font-size：20px; 
} 
  

这个方法会工作，因为在 .css 文件，选择器已经形成，不再是动态的。缺点是它需要一个额外的文件并创建依赖。

/ p>

为所有需要应用于 .hello-world 和 .foo 并扩展为：

  .dummy {
 color ：red; 
} 
 .hello {
& -world：extend（.dummy）{}; 
} 
 
 .foo：extend（.dummy）{
 font-size：20px; 
} 
  

这会创建一个额外的选择器/ p>

注意：添加我的评论作为答案，以便不留下问题未回答，也因为链接中指定的解决方法评论对我来说不起作用。

How do I extend a Less class which is dynamically formed using & combinator?

Less which generates expected output:

.hello-world {
  color: red;
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Expected CSS output:

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

Less does not generate expected output:

.hello {
  &-world {
    color: red;
  }
}

.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Unexpected CSS output:

.hello-world {
  color: red;
}
.foo {
  font-size: 20px;
}

解决方案

Extending a dynamically formed selector (loosely using the term) like that is currently not possible in Less. There is an open feature request to support this. Till it is implemented, here are two work-around solutions to it.

Option 1:

Write the contents of .hello and .hello-world selectors into a separate Less file (say test.less), compile it to get the CSS. Create another file for the rules of .foo, import the compiled CSS as a Less file (using the (less) directive) and then extend the .hello-world as you had originally intended to.

test.less:

.hello {
  &-world {
    color: red;
  }
}

extended-rule.less:

@import (less) "test.css";
.foo {
  &:extend(.hello-world);
  font-size: 20px;
}

Compiled CSS:

.hello-world,
.foo {
  color: red;
}
.foo {
  font-size: 20px;
}

This method would work because by the time the test.css file is imported, the selector is already formed and is no longer dynamic. The drawback is that it needs one extra file and creates dependency.

---

Option 2:

Write a dummy selector with rules for all properties that need to be applied to both .hello-world and .foo and extend it like:

.dummy{
    color: red;
}
.hello {
  &-world:extend(.dummy) {};
}

.foo:extend(.dummy){
  font-size: 20px;
}

This creates one extra selector (dummy) but is not a big difference.

Note: Adding my comment as an answer so as to not leave the question unanswered and also because the work-around specified in the thread linked in comments doesn't work for me as-is.

这篇关于如何扩展一个具有动态形成选择器的类/ mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！