less教程

### 1，Less 嵌套规则
在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。
```
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}

.myclass{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
```
您可以使用以下命令将style.less文件编译为style.css：
`lessc style.less style.css`
编译后
```
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
```

### Less 操作
LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。

**例子**
```
@fontSize: 10px; //@变量名: 变量值; 方式定义变量
.myclass {
font-size: @fontSize * 2; //@变量名 方式使用变量
color:green;
}
```

### Less 转义
有时候，当需要引入无效的CSS语法或Less不能识别的字符，就需要使用转义字符。此时，就可以在字符串前面加一个 ~，并将需要转义的字符串放在 "" 中。格式为：

~"anything"

```
//创建文件 style.less
p {
color: ~"green";
}

//您可以使用以下命令将 style.less 文件编译为 style.css :
lessc style.less style.css

//接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件:
//style.css
p {
color: green;
}
```

### Less 函数
ESS映射具有值操作的JavaScript代码，并使用预定义的函数来操纵样式表中的HTML元素。
如圆函数，floor函数，ceil函数，百分比函数等。
使用方法 : 函数名(参数)

```
\\style.less
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width); //percentage百分比函数，percentage(1) == 100%
}

\\您可以使用以下命令将 style.less 文件编译为 style.css :
lessc style.less style.css
\\style.css
.mycolor {
color: #FF8000;
width: 100%;
}
```

### Less 命名空间和访问器