CODEWITHSUNDEEP
cssimportless
Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

import .css file into .less file

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:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

All imports are other .less files and all works as it should.

My current issue is this: I want to import a .css file into .less that references styles used in the .css file as follows:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

The .css file contains a class called .type but when I try to compile the .less file I get the error NameError: .type is undefined

Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!

Upvotes: 244

Views: 145754

Answers (9)

Fractalf
Fractalf

Reputation: 5339

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";

will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.

Upvotes: 334

Pieter-Jan
Pieter-Jan

Reputation: 49

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)

Upvotes: 4

hinneLinks
hinneLinks

Reputation: 3736

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

Upvotes: 6

mpen
mpen

Reputation: 283273

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';

Upvotes: 265

Charles
Charles

Reputation: 11796

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

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

Upvotes: 5

Gudradain
Gudradain

Reputation: 4753

I had to use the following with version 1.7.4

@import (less) "foo.css"

I know the accepted answer is @import (css) "foo.css" but it didn't work. If you want to reuse your css class in your new less file, you need to use (less) and not (css).

Check the documentation.

Upvotes: 31

Evan Davis
Evan Davis

Reputation: 36602

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

Upvotes: 29

Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Try this :

@import "lib.css";

From the Official Documentation :

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:

Source : http://lesscss.org/

Upvotes: 8

jeffjenx
jeffjenx

Reputation: 17487

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.

Upvotes: 8

Related Questions