Another LESS key feature is the capability of importing other CSS and LESS files. If we're familiar with the standard CSS @import, we know that it can only be used at the beginning of the file to issue the loading of an external CSS file. With LESS, we can do the following:
// look for a style.less file and process + import its contents. @import "style"; // look for a style.less file and process + import its contents. @import "style.less"; // look for a style.css file and import its contents (no processing). @import "style.css";
Note that the behavior depends on the imported file extension. These defaults can be overridden with the following options switches:
// link/use a Less file without including it in the output. @import (reference) "something.less"; // include the file in the output without processing it. @import (inline) "something.less"; // pretend this is a LESS file, regardless of the extension. @import (less) "something.css"; // pretend this is a CSS file, regardless of the extension. @import (css) "something.less"; // never include this file more than once (default behavior). @import (once) "something.less"; // always include this file in the output, even multiple times. @import (multiple) "something.less"; // do not break the compile operation if the file is not found. @import (optional) "something.less";
If we need to specify multiple options within a single @import statement, we can do that by separating each one of them with a comma:
// take it as a LESS file, import once, skip if not found. @import (less,once,optional) "something.css";