The front-end writing style is developed using a preprocessing language, which is the most effective and convenient to maintain
The following explains several problems encountered in the development of less preprocessing styles, in order to Follow-up development reference
1 mixin & include & extend
@mixin
mixin can declare functions and return new style combinations, which is equivalent to style combination tools< br>Multiple mixin functions with the same name can be declared, the parameters can be different, and when calling, the most suitable mixin function will be called according to the number of parameters passed in
The @if keyword can be used in the mixin according to the conditions Return to a suitable style
The mixin statement can declare functions or variables. When declaring functions, you can use the when keyword
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
The mixin can be an existing style, and it can be used with () or not.
You can add !important to the mixin, which is equivalent to the normal style.
< h4>@include
include is equivalent to a function call, or a variable reference, you can use an existing style, or use the style returned by the style function declared by mixin. The style is only effective in the current scope, and Does not affect the output results of other styles.
@extend
With scope, used in @media, it will only act on the current media, using the style in the current media
extend is equivalent to giving the child of the current style Style
Usually used behind & parent selector, style, id selector, the function is to extend the subclass style
2 Several ways to import @import
@import The less method is introduced by default to read, out of css: example:
- @import “foo”; // foo.less is imported as a less file
- @import “foo .less”; // foo.less is imported as a less file
- @import “foo.php”; // foo.php is imported as a less file
- @import “foo.css “; // Keep the statement as it is and import it as a css file
| attribute | Role | Interpretation |
|---|---|---|
| reference | Use the less file but do not export it | Use @import (reference) to import an external file, the imported style will not be added to the compiled output unless the style is referenced. |
| inline | Included in the source file for output, but not processed | When a css file may not be compatible with less |
| less | Treated as a less file, no matter what the extension is | |
| css | Treat the file as a css file, no matter what the extension is | |
| once | The file can only be imported once (default) | The file will only be imported once, and subsequent statements that import the same file will be ignored. |
| multiple | This file can be imported multiple times | The file is repeatedly imported many times |
| optional | compile when no file is found |
Keywords, valid at the same time)
example:
@import (optional, reference) "foo.less";