import .css file into .less file

Question

Can you import .css files into .less files...?

I\'m pretty familiar with less and use it for all my development. I regularly use a structure as follows:

Answer 1

If you want to import a css file that should be treaded as less use this line:

.ie {
  @import (less) 'ie.css';
}

Answer 2

If you want your CSS to be copied into the output without being processed, you can use the (inline) directive. e.g.,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Answer 3

Change the file extension of your css file to .less. You don't need to write any LESS in it; all CSS is valid LESS (except of the MS stuff that you have to escape, but that's another issue.)

Per Fractalf's answer this is fixed in v1.4.0

Answer 4

If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but not include the whole CSS file in the result you can use @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

*Result (my.css) with lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

I'm using lessc 2.5.3

Answer 5

From the LESS website:

If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

@import "lib.css"; The directive will just be left as is, and end up in the CSS output.

As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary @imports consuming precious bandwidth.

Answer 6

since 1.5.0 u can use the 'inline' keyword.

Example: @import (inline) "not-less-compatible.css";

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS. So you can use this to include the file in the output so that all CSS will be in one file.

(source: http://lesscss.org/features/#import-directives-feature)