Import styles from other style sheets
In standard CSS, @import
at-rules must precede all other types of rules. But Less doesn't care where you put @import
statements.
Example:
.foo {
background: #900;
}
@import "this-is-valid.less";
@import
statements may be treated differently by Less depending on the file extension:
- If the file has a
.css
extension it will be treated as CSS and the@import
statement left as-is (see the inline option below). - If it has any other extension it will be treated as Less and imported.
- If it does not have an extension,
.less
will be appended and it will be included as a imported Less file.
Examples:
@import "foo"; // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php"; // foo.php imported as a Less file
@import "foo.css"; // statement left in place, as-is
The following options can be used to override this behavior.
Less offers several extensions to the CSS
@import
CSS at-rule to provide more flexibility over what you can do with external files.
Syntax: @import (keyword) "filename";
The following import options have been implemented:
reference
: use a Less file but do not output itinline
: include the source file in the output but do not process itless
: treat the file as a Less file, no matter what the file extensioncss
: treat the file as a CSS file, no matter what the file extensiononce
: only include the file once (this is default behavior)multiple
: include the file multiple timesoptional
: continue compiling when file is not found
More than one keyword per
@import
is allowed, you will have to use commas to separate the keywords:
Example: @import (optional, reference) "foo.less";
Use @import (reference)
to import external files, but without adding the imported styles to the compiled output unless referenced.
Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
Example: @import (reference) "foo.less";
Imagine that reference
marks every at-rule and selector with a reference flag in the imported file, imports as normal, but when the CSS is generated, "reference" selectors (as well as any media queries containing only reference selectors) are not output. reference
styles will not show up in your generated CSS unless the reference styles are used as mixins or extended.
Additionally, reference
produces different results depending on which method was used (mixin or extend):
- extend: When a selector is extended, only the new selector is marked as not referenced, and it is pulled in at the position of the reference
@import
statement. - mixins: When a
reference
style is used as an implicit mixin, its rules are mixed-in, marked "not reference", and appear in the referenced place as normal.
This allows you to pull in only specific, targeted styles from a library such as Bootstrap by doing something like this:
.navbar:extend(.navbar all) {}
And you will pull in only .navbar
related styles from Bootstrap.
Use @import (inline)
to include external files, but not process them.
Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
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.
Use @import (less)
to treat imported files as Less, regardless of file extension.
Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
Example:
@import (less) "foo.css";
Use @import (css)
to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is.
Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
Example:
@import (css) "foo.less";
outputs
@import "foo.less";
The default behavior of @import
statements. It means the file is imported only once and subsequent import statements for that file will be ignored.
Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
This is the default behavior of @import
statements.
Example:
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
Use @import (multiple)
to allow importing of multiple files with the same name. This is the opposite behavior to once.
Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
Example:
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
Outputs
.a {
color: green;
}
.a {
color: green;
}
Use @import (optional)
to allow importing of a file only when it exists. Without the optional
keyword Less throws a FileError and stops compiling when importing a file that can not be found.
Released [v2.3.0]({{ less.master.url }}CHANGELOG.md)