想法：LESS CSS 在处理/编译时创建特殊选择器

Question

我试图避免选择器的长链并使用一个基于类的选择器，该选择器是在将 LESS CSS 编译为纯 CSS 时自动创建的。有关详细信息，请参阅下面的示例。

受http://css-tricks.com/efficiently-rendering-css/ 的启发，我想到了为每个元素创建独特的类（重复的类可能会有意地有益）以提高 CSS 渲染的效率。

HTML

<div class="main">
  <img src="something.jpg" />
  <a class="link" href="#">Click me</a>
</div>

---

更少的 CSS

div.main {
  img {border:1px solid #ccc;}
  a.link {color:blue;}
}

---

标准纯 CSS（从上面的 LESS 编译）

div.main img {border:1px solid #ccc;}
div.main a.link {color:blue;}

---

Desired 纯 CSS（从上面的 LESS 编译，父元素中的子元素的类的格式类似于
.parentElement1-parentClass1-childElement1-childClass1，如果类未定义，则使用 null）

.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}

---

当然，元素的更具体/描述性的类名可以解决这个问题，但对于更大的应用程序并避免重复的类名，这种方法可能会更好，因为可读性由less处理并且生产css效率很高。 “body”元素被用作基础元素，其他所有元素在命名方面都与它相关。 html 中的类名仍然必须手动定义以符合此要求，但可以创建一个脚本来自动为所有元素创建类名。

我想知道LESS 是否可以考虑到这个标准的编译方法。你对这个想法有什么想法？如果这样的事情可行？

Answer 1

我不确定我是否理解这个问题...如果您需要 - 而不是点和空格，只需编写它：

.div-main {
    &-img-null {border: 1px solid #ccc}
    &-a-link   {color:  blue}
}

我想您可以使用普通的正则表达式搜索和替换将一种格式转换为另一种格式。