Question

我对LESS不熟悉，但已经可以看到它构建庞大的设计框架/系统的巨大力量。

我会尽可能简单地减少我的问题，希望我能在一些帮助下幸运！

所以，让我们说我已经构建了Framework（类似Bootstrap 3），它有很多自己的组件，它们有自己的规则，变量基础等等。而且我有主题，当然可以覆盖这些变量以改变风格。

但是，如果我需要添加一些特定的规则，而这些规则尚未提交过呢？

// FRAMEWORK

@btn-font-size: 12px;
@btn-line-height: 1;
@btn-border: 3px;

.some-component .menu > .btn {
    font-size: @btn-font-size;
    line-height: @btn-line-height;
    border: @btn-border solid transparent;
}


// HERE STARTS MY THEME

@btn-font-size: 16px;
@btn-border: 6px;

.some-component .menu > .btn {
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    background: @FFFFFF;
}

你会问，那么这里的问题是什么？你应该通过这种方法获得你想要的东西。但问题在于我打算构建优化的代码，这些代码的大小要小得多，可读性和逻辑性都要大，并且不会破坏某些依赖性（因此，对于一些复杂的组件，我不需要做一些额外的操作编辑，只是添加一些东西）。

简单来说，我希望它像这样编译：

// FRAMEWORK

.some-component .menu > .btn {
    font-size: 16px;
    line-height: 1;
    border: 6px solid transparent;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    background: #FFFFFF;
}

所以我们的想法是扩展框架，而不是覆盖类。为了做到这一点，我尝试了各种混合，扩展，变量和rulsets等，这似乎没有帮助或足够具体。

任何想法都会受到高度赞赏，因为似乎没有原生的LESS解决方案，但也许有一些技巧？）

Answer 1

另见：How to keep duplicate properties in compiled CSS file when use LESS?

由于Less v2，你应该使用Less Clean CSS plugin来使用clean-css来压缩Less的css输出。

Clean-css会自动合并你的属性。

使用lessc --clean-css code.less输出编译代码：

.some-component .menu>.btn{font-size:16px;line-height:1;border:6px solid transparent;margin-bottom:12px;letter-spacing:.3px;background:FFFFFF}

较少添加新规则到相同的先前选择器/高级rulset注入

1 个答案: