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:

@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...?!

LESS falls back to CSS, so you should be able to just rename style.css to style.less, then import it as per usual...unless of course renaming style.css is not an option — jackwanders, Jun 25 '12 at 20:35
yeah, unfortunately renaming the .css file is not really possible. — Mr Jonny Wood, Jun 25 '12 at 21:05
Have the same problem. Please support the issue https://github.com/cloudhead/less.js/issues/303 — Yaroslav, Jul 04 '12 at 10:26
if you do not need to reference the .css externally, and at the same time you must not modify (rename) the .css file, you could create a symbolic link to it that has the `.less` extension. Then reference it as a `.less` file. Being a symbolic link, it lifts off the burden to synchronize them as your .css changes immediately affect the .less file being imported. The drawback is that you should recompile the final css after subsequent changes. For info on creating symbolic links in Windows, type `MKLINK /?` in a command window — Ivaylo Slavov, Feb 09 '14 at 22:04
@jackwanders, renaming is not necessary, since LESS falls back to CSS (as you correctly point out). You can import the `.css` file using the inline `(less)` directive and take advantage of the fact that `.css` syntax is a valid `.less` syntax — ira, Feb 02 '17 at 06:55

score 333 · Accepted Answer · edited Apr 24 '16 at 14:53

333

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.

edited Apr 24 '16 at 14:53

seven-phases-max

11,765
1
45
57

answered May 30 '13 at 08:04

Fractalf

5,228
3
23
26

1

This is the correct answer. The third one will import+compile the CSS code as less code and will not leave the directive intact. – CMCDragonkai Jul 17 '13 at 19:40
1

I think @import (include) "lib.css" should be used. I don't like the semantics of lying to the compiler. Certainly when you know there's not any LESS code in the file. – Apr 17 '14 at 18:36
17

This will create an additional http-request for foo.css, so the `(inline)` directive (see http://stackoverflow.com/a/22594082/160968) is now preferrable – Urs Nov 18 '14 at 10:43
Rolling back the latest edit since it was simply incorrect and *did not* answer the Q. – seven-phases-max Apr 24 '16 at 14:49
1

@Urs, and also everyone else, that's only assuming you're compiling less client-side. That's not my case, and certainly not the rule, so doing this server-side is completely fine, and in my particular case it works like a charm. +1 – tfrascaroli Feb 22 '17 at 07:58

mpen · Answer 2 · 2015-03-21T22:57:25.637

260

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

edited Mar 21 '15 at 22:57

answered Mar 23 '14 at 17:07

mpen

272,448
266
850
1,236

7

Perfect. This works well when you want to concat some CSS files (e.g. in an ie7.less), but not necessarily process them (e.g. bootstrap-ie7 uses expressions, which LESS doesn't handle well). – Joe Jun 26 '14 at 18:56
5

Very helpful. `@import (css) "styles.css";` didn't work for me. – ivkremer Dec 09 '14 at 15:09
11

They both address different use cases. With `(css)`, the `@import` directive will remain as-is, and as a result the CSS file will be loaded by the browser at runtime ; with `(inline)`, the CSS file's contents are actually imported into the compiled stylesheet, which is what you want if that file is out of your web root for example. Note that the default behaviour when `@import`ing a `.css` file is the same as with the `(css)` flag - [read the docs](http://lesscss.org/features/#import-directives-feature) for more info :) – neemzy Dec 26 '14 at 08:37
Does 'inline' mean that all it's imports will also be inlined? Is there a way to recursively inline? – streetlight Jul 27 '16 at 18:20
@streetlight I don't *think* it will be recursively inlined and I'm not aware of a directive to do that. You could change the source files to .less files if you have control over them. – mpen Aug 01 '16 at 19:36
This should be the best answer. If you use (less), the processor will try to interpret the css code, not just include it. – Soullivaneuh Oct 05 '16 at 15:57
For people who are using css minification and less, this worked for me. I was using cg-angular. – Abhishek Deb May 19 '17 at 00:05

score 31 · Answer 3 · answered Sep 12 '14 at 15:32

31

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.

answered Sep 12 '14 at 15:32

Gudradain

4,653
2
31
40

2

The accepted answer had correct option initially (yes, `(less)` is the *only* option if you want to reuse some styles of a css file) but for some reason @Fractalf removed the correct part with his latest editing. – seven-phases-max Sep 12 '14 at 16:10
1

You can combine "reference" and "less": `@import (less, reference) "foo.css"` – Skarllot Feb 02 '16 at 00:10

score 29 · Answer 4 · edited May 23 '17 at 12:03

29

~~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

edited May 23 '17 at 12:03

Community

1
1

answered Jun 25 '12 at 20:34

Evan Davis

35,493
6
50
57

4

Technically, that's not importing a CSS file. – nilskp Jul 24 '12 at 18:17
@nilskp you are correct; but if you want to use the classes in another file, you need a LESS file, not CSS. – Evan Davis Jul 24 '12 at 18:47
Yes, which seems a bit unnecessary. – nilskp Jul 25 '12 at 03:37
1

@nilskp are you saying that changing the extension is too much to ask in order to have the file parsed as LESS? – Evan Davis Jul 25 '12 at 18:09
23

Yes, of course it is. Try to think outside some little home project where you own all the files. Think bigger, multi-people projects, where not everyone is using LESS. There are tons of use cases where changing file names are not doable. – nilskp Jul 26 '12 at 14:03
Not just "MS stuff", webkit has non-valid stuff too. Say, @-webkit-keyframes cannot be compiled with less – Alex from Jitbit Nov 24 '12 at 16:22
1

You should care if your css contains something like: calc(100% - 45px); and you want that in the browser. If less processes the file as less, the final output will be: calc(55%); because less does the calc. – Christof Aenderl Jan 23 '14 at 20:24
As well, if you're using a package manager such as bower, this isn't an option. – Josh Hunt Apr 01 '14 at 01:32
Respect for the pretty well handled upstream fix. – peterh Mar 29 '17 at 11:56

jeffjenx · Answer 5 · 2013-03-05T05:13:31.840

8

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.

edited Mar 05 '13 at 05:13

answered Jun 25 '12 at 20:36

jeffjenx

17,041
6
57
99

14

This will not IMPORT the file, it will leave the @import directive intact. It will still work, but you should avoid css-import - look at this https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport – Alex from Jitbit Nov 24 '12 at 16:24
5

Thanks for the info @jitbit. Personally, I find it easier to use `@import` during development, then combine and minify the imported files into a single stylesheet when moving to production. – jeffjenx Nov 26 '12 at 15:32
1

If you read the question carefully (and not just the header line), you will see that the OP wants to reference a class in the css file as a mixin, which is not possible if it is just parsed through as a simple css import. – awe May 23 '14 at 07:42

score 8 · Answer 6 · answered Mar 05 '13 at 05:16

8

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/

answered Mar 05 '13 at 05:16

Dr.Kameleon

22,532
20
115
223

2

If you read the question carefully (and not just the header line), you will see that the OP wants to reference a class in the css file as a mixin, which is not possible if it is just parsed through as a simple css import. – awe May 23 '14 at 07:44

score 6 · Answer 7 · answered Dec 02 '15 at 12:35

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

This was what I needed. However, I had to use the extend syntax: `&:extend(.reference-class all);`. Directly referencing the class resulted in a compile error. — Jens Neubauer, Mar 15 '17 at 15:20

score 5 · Answer 8 · answered Oct 27 '14 at 14:36

5

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

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

answered Oct 27 '14 at 14:36

Charles

11,367
10
77
114

score 4 · Answer 9 · answered Apr 06 '16 at 12:27

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)

import .css file into .less file

9 Answers9

Linked

Related