使LESS在编译时删除无用的ID [英] Make LESS remove useless IDs when compiling
问题描述
我真的很喜欢LESS的一个功能是嵌套规则。它使得样式表变得更清晰，你可以很快找到一个元素。
One feature I really love with LESS is nested rules. It makes the stylesheet much cleaner that way and you can find an element very quickly.
我想知道如果编译优化选择器时有一个选项。例如...
I was wondering if there's an option when compiling to optimize selectors. For example...
#global {
/* Styles here maybe */
.container {
/* Styles here maybe */
#sidebar {
/* Styles here maybe */
.title {
font-weight: bold;
}
}
}
}
编译为 #global .container #sidebar .title {font-weight：bold; } 。
但前两个选择器是无用的，因为 #sidebar
But the first two selectors are useless, since #sidebar should be unique in my page.
有没有办法让LESS编译为 #sidebar .title {font-weight：bold; }
Is there a way to ask LESS to compile this to #sidebar .title { font-weight: bold; } instead?
推荐答案
您的假设是错误的，CSS中的多个ID是多余的。例如，一个CMS生成页面类型到输出中的网站，例如，它是联系页面：
Your assumption is wrong that multiple IDs in CSS are redundant. Imagine, as an example, a site where the CMS generates the page type into the output, like that it's the contact page:
<body id="contact">
<section id="content">Blah</section>
</body>
根据你的逻辑，下面的CSS将是'optimization'的候选： p>
According to your logic, the following piece of CSS would be a candidate for 'optimization':
#contact #content {
background:red;
}
现在，您的首页有< body id =home> 当然在这个想象的CMS。突然，您的首页的内容具有红色背景，因为您决定错误地优化CSS中的 #contact 选择器，而最肯定不应该有红色背景根据这条规则。
Now however, your home page has <body id="home"> of course in this imaginary CMS. And suddenly the content of your homepage has a red background because you decided to erroneously optimize that #contact selector out of the CSS, while it most certainly shouldn't have a red background according to this rule.
所以没有，LESS不能这样做，因为它会破坏代码。如果您不希望选择器，请不要使用它们，也不要将它们放在代码中。
So no, LESS cannot do this because it would break code. If you don't want the selectors, don't use them and don't put them in your code.
这篇关于使LESS在编译时删除无用的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
