### less
```
author:shangyy
date:2018-02-05
```
official website ：[less](http://lesscss.org/)
[cn-website-less](http://lesscss.cn/)
[vue-less config](https://www.cnblogs.com/QQ-Monarch/p/7126309.html)
[less-cli-less (github reference）](https://github.com/checkmind/vue-cli-less/)
## 一、installation
### global install
```
npm install less -g
yarn add global add less
```
#### local install
```
npm install less --save-dev
yarn add less --dev
```
### 二、install less-loader
react use less
vue use less
## 三、feature
1.**variavles**
```css
@font-color:#ddd;
.container{
color:@font-color
}
// url
@images: "../img";
// Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}
// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";
lazing loading
Variables are lazy loaded and do not have to be declared before being used.
```
2.**mixins**
```css
.border-red{
border:1px solid red;
}
.container{
color:red;
.border-red
}
Namespaces
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}
The !important keyword
.important {
.foo() !important;
}
Parameters
.my-hover(@cl:#ffa,@bg:#aaf){
color:@cl;
background: @bg;
}
.parent{
.son{
.my-hover(red,#000) !important;
}
}
named parameters
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
Mixins as Functions
.mixin() {
@ 100%;
@height: 200px;
}
.caller {
.mixin();
@width;
height: @height;
}
```
**3.nested rules**
```
.parent{
color:red;
.son{
background:yellow;
&:after{
content:'';
display: block;
height: 20px;
border:1px solid blue;
}
}
}
@media screen and (min- 768px) {
color:blue;
}
nested:
.screen-color {
@media screen {
color: green;
@media (min- 768px) {
color: red;
}
}
```
4.**Operations**
```
Arithmetical operations +, -, *, / can operate on any number, color or variable
```
5.**scope**
```
Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
```
6.**comments**
```
/* One hell of a block
style comment! */
@var: red;
// Get in line!
@var: white;
```
7.**importing**
```
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
@import "library"; // library.less
@import "typo.css";
```
### less-function(Built-in functions supported by Less.)
```
less-function(Built-in functions supported by Less.)
一、Misc Function
1.convert();
convert(9s, "ms")
convert(14cm, mm)
2.default()
** not other use default
.mixin(@value) when (default()) {padding: (@value / 5)}
.mixin(@value) when (ispixel(@value)) { @value}
.son{
color:color("#aaa");
.mixin(100px);
}
3.unit();
unit(5, px)
4.svg-gradient
div {
@list: red, green 30%, blue;
background-image: svg-gradient(to right, @list);
}
```