理解以及使用less

一、 LESS是什么？

1. LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。
2. .LESS既可以在客户端上运行，也可以借助Node.js或者Rhino在服务端运行。
3. 将.less文件编译后为正常的css样式

二、 如何使用LESS

1. 在html文件中引入less文件：<link href="less文件地址" rel="stylesheet/less">
2. 引入Less.js文件：<script src="文件地址"></script>

三、 LESS基础语法

1. 变量

① 声明变量：@变量名：值;
② 使用变量：@变量名

1. 在定义以及使用变量时，当对同一变量二次赋值时，会有作用域的问题，导致二次赋值以后的所有使用都为新值。
2. 在给有单位的属性赋值时，变量赋值必须要带单位

@color1:red;//全局变量
.borderColr{
	@radius:50%;//局部变量
	background:@color1
	border-radius:@radius
}
@color1:green;//二次赋值
.test{
	border-radius:@radius;//报错radius为局部变量
	background:@color1;//背景为绿色
}

2. 混合

1. 混合可以将一个定义好的class A轻松引入到另一个class B中，从而实现class B继承class A的所有样式。还可以带参调用，就和调用方法一样。
2. 不传参调用不需要带括号。传参调用需要带括号。
3. arguments包含了所有传递进来的参数

//arguments
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

@color1:red;//全局变量
.borderColor{
	background:@color1;
	.borderRadius;//不传参调用，不需要带括号
	.height(200px);//传参调用，需要带括号。
}
.borderRadius(@r:10px){
	border-radius:@r;
}
.height(@h:100px){
	height:@h;
}

//混合 编译后的.borderColor
.borderColor{
	background:red;
	border-radius:10px;
	height:200px;
}

3. 嵌套规则

1. 我们可以在一个选择器里嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
2. &代表本身，若在一个选择器中添加&:hover代表给本身添加hover样式

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
   font-size: 12px;
    a {
     text-decoration: none;
      &:hover { border-width: 1px
       }
    }
  }
}


//生成的css
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

4. 加减运算

1. 运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系
2. 属性值的加减运算是带单位运算。颜色的运算时符号和值之间必须要有空格，否则报错，eg： 错误：@bgcolor-@bgcolor2；正确：@bgcolor - @bgcolor2

@w:100px;
@h:100px;
@bgcolor:#ff0000;
@bgcolor2:#009991;
.sn{
  width: @w*2;//200px
  height: @h*2;//200px
  border: 1px solid @color;
  background-color: @bgcolor - @bgcolor2;
}

5. 颜色的函数

1. lighten(color,百分比)：100%为白色，0%为原色。百分比越大颜色越亮
2. dark(color,百分比)：100%为黑色，0%为原色。百分比越大颜色越暗
3. saturate(color，百分比)：增大饱和度。但给普通颜色设置饱和度无变化。给hsl(..,..,..)设置饱和度有变化
4. desaturate(color，百分比)：降低饱和度
5. fadein(颜色，百分比)：增加颜色的不透明度
6. fadeout(颜色,百分比)：减少颜色的不透明度
7. spin(颜色，度数)：度数为数字。用于旋转所选颜色的角度（在颜色拼盘上逆时针旋转）
8. mix(color1,color2)：混合两个颜色

6. Math函数

不可用下面三个函数拼接字符串给属性赋值（会在数字和字符串间自动生成一个空格）。但可直接用于相加减，也可直接对带px单位的属性做运算

1. round(num)：四舍五入
2. ceil(num)：向上取整
3. floor(num)：向下取整
4. percentage(num):将一个数转成百分比

@a:round(200.6);
@height:200.266px;
@height:round(200.6)px;//错误，生成的为200 px
.sx{
  height: round(@height);//200px
  height:round(@height)+@a;//400px
   height:@a+"px";//错误 ，生成201 "px"
  border:1px solid #fff000;
}

7. 命名空间（命名空间起名称可用：以./#开头）

有时为了更好地封装或组织css，可将其放入一个命名空间中

#hello{//命名空间
  .borderColor(@c:#ff0){
    border:1px solid @c;
  }
}
.se{
  height: round(@height)+@a;
#hello>.borderColor(#000);//使用命名空间中的样式
}

8. 字符串插值：可将变量通过@{变量名}的方式嵌入到字符串中

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
//编译完成后为http://assets.fnord.com/images/bg.png

9. 避免编译：加上~可不对后面的内容进行编译

1. 有时我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，需要使用~，将其后面的内容不进行编译而直接输出字符串
2. 可用""将避免编译的内容包含起来

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

//生成css的结果为

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

10.模式匹配和导引表达式

① 模式匹配

1. 可根据不同的赋值起到模式匹配的作用。只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
2. 下例中，mixin、switch都是名称，可换。默认匹配的参数名也可换

//在下面例子中，可根据@switch的值取不同的.mixin，.mixin(@_,@color)代表无论@switch为什么值都会匹配
//假如@switch为dark，则会取第一个样式
@switch:dark;
.mixin (dark, @color) {
//只接受dark作为首参
  color: darken(@color, 10%);
}
.mixin (light, @color) {
//只接受light作为首参
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
//无论首参为什么都会被匹配
  display: block;
}
.class {
  .mixin(@switch, #888);
}

//上述例子编译后的CSS
.class {
 display: block;
 color: darken(#888, 10%);
}

② 导引

1. when关键字被定义为一个导引序列，只有当when括号中的判断为真时才会采用该混合，否则不采用
2. 导引中可用运算符：>、<、>=、<=、=（判断左右两边是否相等）
3. 导引中只有关键字true为真，其余值都被视为布尔假
4. 导引序列使用,分割不同的条件，当所有条件中任意一个条件符合时都会被视为匹配成功。
5. 在导引序列中可以使用and关键字实现与条件，使用not关键字实现非运算。,实现或运算
6. 如果想要基于值类型进行匹配，有几个函数：
   ① iscolor(变量)
   ② isnumber(变量)
   ③ isstring(变量)
   ④ iskeyword(变量)
   ⑤ isurl(变量)
7. 如果要判断一个值是纯数字还是某个单位量，可用以下函数
   ① ispixel(数字)：是否为带像素单位的值
   ② ispercentage(数字)：是否为百分数
   ③ isem(数字)