如何在编译LESS到CSS时避免重复CSS类

Question

I am using less files for developing css but when I am compiling as css base.less get compile multiple times for eg:

style.less
   @import 'base.less'
   @import 'variable.less'
   @import '../../dashboard/my-dashboard.less'

my-dashboard.less
   @import 'base.less'
   .my-dashboard-css{
     all css goes here
}

when compiling style.less to style.css want to skip base.less from "my-dashboard.less" but i want to import base.less for reference for developer .Pls suggest me how to avoid me. Also Ihv tried @import(once) but its not working.

Answer 1

You can import only references using keyword reference : @import (reference) "foo.less"; .

http://lesscss.org/features/#import-options

Answer 2

I agree to @3rdthemagical answer. So for your answer follow the link as your guideline.

Here's probably your output in the end.

style.less
   @import (reference) 'base.less'
   @import (reference) 'variable.less'
   @import (less) '../../dashboard/my-dashboard.less'

my-dashboard.less
   @import (reference) 'base.less'
   .my-dashboard-css{
     all css goes here
}

and here's my actual LESS CSS

// CodeKit Framework Libraries [Bootstrap]
@import (reference) "utilities";
@import (reference) "variables";
@import (reference) "mixins";

// Internal Libraries
@import (less) "_fonts";
@import (less) "_mixins";
@import (less) "components/default";
@import (less) "components/menu";
@import (less) "components/header";
@import (less) "components/footer";

@import (less) "components/core";

Note: All under reference will be my variables and mixins. And if you declare your import as less it will read and import the file as less content.