Less语法

是一种动态样式语言
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

1.less文件的引用

rel 中一定要加/less，不然会报系统错误

	<link rel="stylesheet/less" href="css/less.ts"/>
    <script src="js/Less.js"></script>

二.变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
eg:70周年样式，只改部分变量，颜色深浅通过百分比改变

声明变量：以@为关键字进行声明
使用变量
全局变量和局部变量

<div class="borderColor"></div>
<div class="border"></div>

@color:red;
@width:100px;
@height:100px;
.borderColor{
  @radio:50%;
  border: solid 1px @color;
  width: @width;
  height: @height;
  border-radius: @radio;
}

@radius是局部变量，会报错
.border{
  border: solid 1px @color;
  width: @width;
  height: @height;
  border-radius: @radius;
}

三.混合

类似于方法的定义和调用
定义了一个方法，可以调用，可以传参

<div class="borderColor"></div>
<div class="border"></div>

@color:red;
@width:100px;
@height:100px;
.borderColor{
  border: solid 1px @color;
  width: @width;
  height: @height;
  .border;
}
.border{
  border: solid 1px @color;
  width: @width;
  height: @height;
  .border(50px);   /*可以传参数*/
}
.border(@r:10px){
  border-radius: @r;
}

四.嵌套

类似继承
里边类是 .menu li{ }，以空格隔开
添加hover样式是 &：{}&代表当前元素

<ul class="menu">水果
    <li>西瓜</li>
    <li>香蕉</li>
    <li>菠萝</li>
    <li>苹果</li>
</ul>

.menu{
  margin: 0;
  padding: 0;
  border: solid 1px black;
  li{
    border: solid 1px red;
    height: 50px;
    width: 100px;
    &:hover{
      background-color: #00ffd2;
    }
  }
}

五.函数和运算

±*/
颜色之间也可以进行相加减，颜色与运算符之间用空格隔开

@w: 100px;
@h: 100px;
@bgcolor: #ff00ff;
@bgcolor1: #fff;
.sb {
  width: @w*2;
  height: @h+100;
  border: solid 1px @color;
  background-color: @bgcolor - @bgcolor1;
}

颜色的函数

lighten(@color,10%); 高亮，相当于拉调色盘的亮度条，增加颜色亮度，100%是白色，0%是黑色
darken(@color,20%);降低颜色亮度
saturate(@color,20%)升高颜色饱和度，饱和度越大，颜色越亮
desaturate(@color,20%)降低颜色的饱和
fade(@color,20%)设置颜色的透明度
fadein(@color,20%)增加颜色的不透明度
fadeout(@color,20%)减少元素的不透明度
mixin  混合颜色

Math函数

round(1.67)   2   四舍五入
ceil(2.4)     3   向上取整
floor(2.4)    2   向下取整
percentage(0.5)   50% 将一个值转化为百分数

六.命名空间

函数的调用
将写的函数进行归类，然后用命名空间进行调用

#handle{
  .bgcolor(@c:red){
    background-color: @c;
  }
}
.sb{
  width: 100px;
  height: 100px;
   #handle>.bgcolor();
}

七.字符串插值

形参要加**@{变量}**，url("@{a}")调用的时候直接传值就可以

@img:"../img/1.jpg";
#handle{
  .bgimg(@a){
    background-image: url("@{a}");
  }
}
.sb{
  width: 100px;
  height: 100px;
  #handle>.bgimg(@img);
}

还有sass,stylus语言，可以自行了解
连写带记