CODEWITHSUNDEEP
cssless
Mediator
Mediator

Reputation: 15378

How to separate settings and css in a less?

I have a Common less file and a Custom less file.

The Common less file contains a css for all web-site pages and the Custom a css for several pages.

I would like use Common variables in Custom less.

As I see it:

In Custom.less.css file:

@import(CommmonSettings.less.css)

@header-color: @orange;
@header-active-color: @orange-dark;

... css code ...

The CommonSettings.less.css file contains:

@orange: #f58024;
@orange-dark: #d35437;

How can I do it ?

Upvotes: 0

Views: 101

Answers (2)

ScottS
ScottS

Reputation: 72261

The Key to Your Issue is Getting Proper File Extension

Your file of common settings is named CommmonSettings.less.css, which means it is a .css file, not a .less file. When you read the documentation for LESS on importing, you can see that if you do this...

@import "CommmonSettings.less.css";

... you are treating the file as just .css since that is its file extension. Now CSS knows nothing about variables and all the cool things of LESS, and when LESS is told to import a file as .css, it just copies the code, and ignores processing it as LESS.

That's why you need to either rename the file with the .less extension only, and then import it like so:

@import "CommmonSettings.less";

Or since version 1.4 of LESS, you can keep your .css file extension but force it to process as LESS on import like so:

@import (less) "CommmonSettings.less.css";

Either of those will actually read the @orange variable values you seek and make them usable in your a Custom file. Note, however, that your file name for that file should be renamed to Custom.less not Custom.less.css if you want that file to process as LESS. Once the LESS code is processed, that is when it is output as a CSS file (see Client-Side or Server-side usage of LESS).

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

Here's how you do it:

In v1.4.0 you can force a file to be interpreted as a particular type by specifying an option, e.g.

@import (css) "lib";

Will output..

@import "lib";

and

@import (less) "lib.css";

Writing it as @import"CommmonSettings.less.css"; should still work.

Upvotes: 0

Related Questions