Less的基本语法

作为一门标记性语言，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;
}