怎樣讓less相互引用但不生成他們的樣式css？

02-07

比如我現在有個common.less和layout.less。我的本意是在common.less里寫公共的less組件來讓layout.less引用.但是我發現當我在common.less里寫類似於: .title {}時,layout.less里生成的css里也會出現...如果寫成.title() {}就沒問題了.怎樣才能讓layout的css不生成common里的css?
或者說是不是使用less時要遵循一定的規範?比如說一個less做less公共組件時就不應該同時輸出css,如果輸出css就不應該被其他less引用?

之前也遇到這個問題，上中文的less網站去看文檔沒有找到線索，索性直接去less的官網瞅瞅，果不其然還真的有：

Language Features

@import (reference) "foo.less";

Use @import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.

使用 import (reference) 其它的less文件，不會添加它們的樣式進來，除非你引用了其中的style，它們會一起編譯進來。這個標識的好處是方便了style 和 style function 間的取捨，寫 style 的時候就不用擔心這個是不是可以成為一個方法了，引用的時候使用 (reference) 就好。可以很方便的在 LESS 文件中實現 mixins。

寫成函數就不會自動生成了，例如把.title {}改寫成.title() {}就可以了（調用的時候，也改一下）

我也有樓主同樣的遭遇，後來我在common.less里只寫mixin，每個類名必須加括弧。例如.title() {}，其他地方如果要用，直接調用.test{.title()}，這樣就可以了。

寫公共組件也是一樣，.btn(){} .select(){}，全部都加括弧，讓他變成mixin。

建議你看下百度的一個less框架est，細看後會有驚喜。