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>

LESS CSS

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

Standard Plain CSS（从上面的LESS编译）

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

所需普通CSS（从上面的LESS编译，父级中子元素的类格式为
.parentElement1-parentClass1-childElement1-childClass1，如果是，则使用null未定义）

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

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

我想知道LESS是否可以使用这个标准的编译方法。你对这个想法的看法是什么，以及这样的事情是否可行？

Answer 1

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

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

我猜你可以使用普通的正则表达式搜索＆amp;替换以将一种格式转换为另一种格式。

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

1 个答案: