Less use @import be Mixins

Import command

Import styles from other stylesheets

In the CSS standard, @ import at-rules must precede all other types of rules. But Less.js does not care where you place the @import statement

Example:

.foo {
  background: #900;
}
@import "this-is-valid.less";

File Extensions (file extension)

@ import Statement may be less Less processing, depending on the file extension:

• If a file has .css extension, it is treated as CSS, and @import statement left intact (see the following inline option).
• If it has any other extension, it is treated as less and import.
• If no extension it will attach .less, it will be included as Less imported file.

Example:

@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

You can override this behavior using the following options.

Import Operations

Less offers several extended CSS @import CSS at-rule to provide more flexibility than using an external file.

Syntax: @import (keyword) "filename";

It has achieved the following import commands:

• reference: Use Less files without output
• inline: source file contained in the output, but it does not handle
• less: no matter what file extensions that are treated as files Less files
• css: No matter what the file extension that will file as CSS file
• once: the file contains only once (this is the default behavior)
• multiple: multiple file that contains the
• optional: continue compiled on file not found

Each @import allows multiple keywords, you must use a comma to separate keywords:

Example: @import (optional, reference) "foo.less";

 

 

Common file:

　　1. file write less, css need to import other file is required to specify the operation instruction

　　　　E.g:

@import (once,css,less) "filename"