CODEWITHSUNDEEP
cssless
Ali Shakiba
Ali Shakiba

Reputation: 21257

LESS: How can I include (concatenate) a css file without being processed?

How can I include (concatenate) a css file without being processed by less?

I can use @import (less) file.css; but it processes the css file which is not desired. On the other hand @import (css) file.css; is just replaced with @import file.css;.

Why? Because I'm trying to include and minify Skeleton css files in project main styles file but Skeleton includes body { font: 14px/21px } which is processed by less and results in incorrect font size.

Upvotes: 1

Views: 1154

Answers (2)

MountainAsh
MountainAsh

Reputation: 534

Sounds like you want to use the 'inline' reference.

@import (inline) 'file.css';

This will pull in the css file content as is without processing it.

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

Upvotes: 1

ScottS
ScottS

Reputation: 72261

Perhaps you need to be clearer on your issue, but on the LESS site, the first line about importing states this:

You can import both CSS and LESS files. Only LESS files import statements are processed, CSS file import statements are kept as they are. If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

Which means simply neither @import file.css nor @import (css) file.css (a 1.4.0 version syntax) should be getting processed by LESS, as it is a .css file.

Now it appears you are using LESS 1.4, as you are referring to the newer syntax of @import (css) file.css. If so, in addition to the fact that 14px/21px is (as I understand you) making a division that you do not want, then if the importing is not functioning correctly (perhaps due to a bug?), then maybe what you can do is turn on the strict math setting. Currently, the notes for 1.4.0 state:

[W]e have introduced a strictMath mode, where math is required to be in parenthesis... In 1.4.0 this option is turned off, but we intend to turn this on by default. We recommend you upgrade code and switch on the option (—strict-math=on in the command line or strictMath: true in JavaScript). Code written with brackets is backwards compatible with older versions of the less compiler.

That would prevent the 14px/21px from becoming font: 0.6666666666666666; on output in LESS 1.4.

Upvotes: 1

Related Questions