Writing style uses front-end preprocessing language development, is the most effective and easy maintenance
few questions below explain encountered in less pre-style development, so that subsequent development of reference
1 mixin & include & extend
@mixin
mixin can declare the function and returns a new combination of style, the style is equivalent to a combination of tools
can declare multiple mixin function of the same name, parameters can be different, and when you call, the call will match the most appropriate based on the number of parameters passed mixin function
mixin can be used in accordance with the conditions @if keyword returns the appropriate style
mixin statements can declare functions or variables when you declare a function can be used when keywords
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
mixin may be an existing style, you can use plus () or without
can be added to the mixin! important role in the equivalent of the Normal style
@include
include the equivalent of calling a function, or a reference to a variable, you can use an existing style, or use a style statement mixin style function returns, the style only take effect in the current scope, and does not affect other styles of output results.
@extend
Scoped, in @media, only the role of the current Media, using the style in the current Media
Extend the current pattern corresponds to the sub-pattern
typically used in the parent & selector, style, behind id selector, the role of expand the subclass style
2 @import introduced several ways
@import reads default import less, than the css: example:
- @import "foo"; // foo.less imported as less file
- @import "foo.less"; // foo.less imported as less file
- @import "foo.php"; // foo.php imported as less file
- @import "foo.css"; // statement intact, imported as css file
| Attributes | effect | DEFINITIONS |
|---|---|---|
| reference | The use of less file but it does not output | Use @import (reference) to import external files, the imported style will not be added to the compiler output, unless the style is referenced. |
| inline | Comprising an output in the source file, but not processed | When a css file may not be compatible with less |
| less | Consider the file less file, regardless of the extension is | |
| css | The files as css file, no matter what the extension is | |
| once | This file can be imported only once (the default) | The file will only be imported once, subsequent statements to import the same file will be ignored. |
| multiple | The file can be imported multiple times | File repeat been introduced several times |
| optional | When the file is not found yet compiled | Avoid importing less file does not exist, if not this parameter will report File Error Error |
For chestnut (you can use multiple keywords, to take effect at the same time)
Example:
@import (optional, reference) "foo.less";