less - 仅使用 less 样式表的一部分

Question

假设我有一个较少的样式表，其中包含很多样式，并且我想将其他一些样式复制到新表中，如下所示:

巨大的样式表.less:

/*

blah blah blah for dozens of styles

*/
.loopy {
    color: greenyellow
}

tiny-stylesheet.less:

.froopy {
    .loopy
}

我是否可以对其进行设置，以便在编译时，tiny-stylesheet.css 仅定义了 .froopy 样式，而没有定义巨大-stylesheet.less 中的其他所有内容？

Answer 1

更新答案 LESS 1.5

您现在可以在 LESS 1.5 中导入文件作为引用。所以

@import (reference) "huge-stylesheet";

这使您可以huge-stylesheet.less中使用任何和所有 LESS，而无需输出任何内容到 tiny-stylesheet.less.

然后您应该能够按照您最初的意图进行操作:

.froopy {
    .loopy;
}

原始答案

是的，通过使用命名空间，“编译时，tiny-stylesheet.css 只定义了 .froopy 样式，而不定义其他所有内容”是可能的。您可能需要在单独的文件(例如master.less)中设置命名空间，如下所示:

#yourNameSpace() {
    your huge code that was in huge-stylesheet 
}

然后使用另一个文件生成huge-stylesheet.less，如下所示:

@import "master"; 
#yourNameSpace; //call the code to produce the huge sheet

并在tiny中使用它，如下所示:

@import "master";
.froopy {
    #yourNameSpace > .loopy;
}

或者您可以尝试将代码保留在 huge 工作表中，并在 tiny-stylesheet.less 中执行此操作(我还没有玩过导入来知道是否它可以嵌套在一个 block 中):

#yourNameSpace() {
    @import "huge-stylesheet"; 
}

.froopy {
    #yourNameSpace > .loopy;
}

无论哪种方式，它都只会从命名空间中提取代码.loopy。 tiny LESS 文件不会从命名空间代码生成其他最终 CSS 代码。