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

Css 较少向相同的先前选择器/高级rulset注入添加新规则,css,dependency-injection,less,mixins,Css,Dependency Injection,Less,Mixins,我对LESS有点陌生,但我已经看到了构建大型设计框架/系统的巨大威力 我会尽量简化我的问题,希望能得到一些帮助,我会很幸运 比如说,我有一个构建框架(类似于bootstrap3),它有很多自己的组件,它们有自己的规则,要基于的变量等等,还有一个主题,当然可以覆盖这些变量来改变样式 但是,如果我需要添加一些以前没有介绍过的特定规则,该怎么办 // FRAMEWORK @btn-font-size: 12px; @btn-line-height: 1; @btn-border: 3px; .so

我对LESS有点陌生,但我已经看到了构建大型设计框架/系统的巨大威力

我会尽量简化我的问题,希望能得到一些帮助,我会很幸运

比如说,我有一个构建框架(类似于bootstrap3),它有很多自己的组件,它们有自己的规则,要基于的变量等等,还有一个主题,当然可以覆盖这些变量来改变样式

但是,如果我需要添加一些以前没有介绍过的特定规则,该怎么办

// 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;
}
所以我们的想法是扩展框架,而不是覆盖类。 为了做到这一点,我尝试了各种混合、扩展、带有Rulset的变量等,这些似乎都没有帮助或不够具体

如果您有任何想法,我们都将不胜感激,因为似乎没有非本地的解决方案,但可能有一些技巧?

另请参见:

由于Less v2,您应该使用压缩来自Less的css输出,使用干净的css

干净的css将自动合并您的属性

使用
lessc——干净的css代码编译代码。更少的
输出:

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

您可以使用
reference
选项
导入
框架文件,然后添加
.some component.menu>.btn()在主题文件的选择器中,获取框架文件中定义的属性并添加。它会达到你所需要的。但是如果你想要压缩/优化的代码,那么最好尝试一下
--cleancss
选项。嘿,伙计,thx是快速反应的工具!引用似乎只是输出了主题减去框架的所有CSS,这与我所追求的并不完全一样,但我不确定我是否正确地理解了如何通过添加调用类(如来自主题的mixin)来解决这个问题,您能给出一个示例说明您的意思吗?我已经读过了——干净的css,通常我不相信这样的自动化解决方案,所以我更喜欢手动为框架编写任何东西……我正在考虑做一些事情,比如自己将所有框架类作为mixin编写,然后调用它们并将规则添加到以前的类中,如@rest,它=添加到某个变量规则集。你认为这种方法怎么样?如果它可以工作,那么知道如何在默认情况下在框架中对自执行混合进行排序也会很好,这样就不会到处调用它们:)我对前面的评论的最后一部分有点困惑。
.some component.menu>.btn()行是用来调用mixin的。如果您没有在主题文件中添加这一行,那么使用reference选项将不会从主题中的框架文件中输出任何内容。此外,Less默认情况下不会合并/分组选择器。我个人的观点是,不要重新发明轮子,尽可能多地使用库。嗯……是的,但这意味着我应该调用主题中的所有组件和选择器(因为我可能想在任何地方注入一些东西,这将是一大堆调用)))技术上是可能的,但不太方便。。是的,我可以理解你的观点,但对我来说,这不是一个选项,因为我有很多在现有的设计/组件库中没有看到的想法,像Bootstrap一样值得关注。嘿,伙计,谢谢你的回答!从技术上讲,这是可行的,但我强烈希望不要使用干净的css,而是使用一些没有黑客攻击的功能作为手术刀工具。还可以看到:嗯,我以前没见过它是内置的,对不起。然后我的问题是,如何将它从所有其他任务中完全剥离出来,比如缩小和其他任务?我只想加入相同的选择器副本来代替LESS中的第一个选择器,这似乎是我想要的)+你有什么建议如何使用这个带有Sublime text 3的插件吗?现在我使用node.js LESS进行编译,我需要如何安装和配置这个插件,以便它在Sublime 3中以这种方式编译?事实上,clean css没有类似于
--仅合并选择器的选项。您可以基于干净的css代码编写自己的插件,请参见:。你可以设置
lesscommand:lessc--less plugin yourplugin
为sublime。这只是效益/努力的比率。请注意,您所说的功能是只为生成数千个选择器的框架保存一个选择器(+2个括号)。所以,是的,拥有它会很好,但它不会存在,直到有人发现花自己的时间去实现它是如此重要。