作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、scope（作用域）等概念。
Less在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性
1.声明变量
- 声明普通变量
Less可以自定义变量，变量可以使开发变得简单。注意变量 不能以数字开头，不能包含特殊字符 区分大小写。
@myColor:red;
a {
color: @myColor;
}
- 声明类名变量
@charset "UTF-8";
@myColor:red;
@className:active;
.@{className} {
font-size: 16px;
}
2.混入
- 类混入
@charset "UTF-8";
.c() {
width: 50%;
}
.f {
.c();
}
- 函数混入
@charset "UTF-8";
.w() {
width: 50%;
}
.f(@direction){
float: @direction;
}
.a {
.w();
.f(left);
}
- 嵌套
@charset "UTF-8";
@mainColor:red;
.b() {
width: 50%;
}
.f(@direction){
float: @direction;
}
.guo {
.b();
.f(left);
a {
display: block;
&:hover {
color: @mainColor;
}
}
>div {
.b();
}
}
运算
@charset "UTF-8";
/*运算*/
@num:5;
ul {
width: 100%*@num;
li {
width: 100%/@num;
}
}
// 要注意，运算符号的前后是要有空格的
.box{
width:calc(100% - 16px);
height:calc(100% - 16px);
margin:8px;
}
