前端基础工具(一) less 基本使用语法

本文仅介绍less的基础语法,实际安装方法请参考[官方文档](http://lesscss.cn/)安装使用,如需帮助请联系博主😤,话不多说进入正题.

1. 变量
less通过@符号定义变量名称在less文件中可以多次调用,变量可作为选择器，例子如下:

less输入:

@nice-blue: #5B83AD;
#header {
color: @nice-blue;
}

css输出:

#header {
color: #5B83AD;
}

2. 混合
可以将class样式混合到另一个class中混合使用

less输入：
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
css输出：

.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}

3. 嵌套
通过less的嵌套可以实现css的嵌套样式，同时&可以实现伪类的嵌套

less输入：
.b{
color:red;
a{
font-size:5px;
&:hover{
text-decoration:none;
}
}
}
css输出：
.b{
color:red;
}
.b a{
font-size:5px;
}
.b a:hover{
text-decoration:none;
}

4. 函数和计算
函数可通过传参设置样式，函数中可以进行数学计算,同时less也有内置函数供使用者使用,常用包括字符串函数,列表函数,数学函数,类型函数,颜色操作函数,颜色混合函数

less输入：
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px);
padding: @average;
}
css输出：
div {
padding: 33px;
}

5. 命名空间和作用域
变量也可定义在标签内，有自己的作用域，在自己的作用域内生效，也可在其他标签作用域内生效。

less输入：
.demo {
.demo_tab () {
width:100px;
}
.demo_citation () {
height:200px;
}
}
div {
.meng > .meng_tab;
}
h1 {
.meng > .meng_citation;
}

css输出：
div {
width: 100px;
}
h1 {
height: 200px;
}

6. 其他

* 公共样式以及变量可以通过@import引用到需要使用的less文件中使用。

* JavaScript表达式也可在less中使用

@var: `"hello".toUpperCase() + '!'`;
// 输出
@var: "HELLO!";