通过应用 LESS,您可以混合如下声明:
/* LESS */
.foo {
/* some style here */
}
.bar {
.foo;
}
请注意,如果您想.foo
从 CSS 输出中隐藏规则集(可能是仅用于继承的规则集),您可以稍微修改上面的代码:
/* LESS */
.foo() { /* It's called "parametric mixin" */
/* some style here */
}
.bar {
.foo;
}
通过使用 LESS(或 SASS/Stylus,如果您愿意),您可以在 HTML 代码中解耦样式和类名,同时保持样式规则集可重用:
<!-- no need to use style-related class name here -->
<h2 class="post-title">...</h2>
/* LESS */
/* reusable style ruleset */
.bold-title() {
font-weight: bold;
font-family: Impact, sans-serif;
}
/* actually use those rulesets */
.post-title {
.bold-title;
}
编译后你会得到如下整洁的 CSS 代码:
/* CSS */
.post-title {
font-weight: bold;
font-family: Impact, sans-serif;
}