Import directives

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"; 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.98.250