10分钟深入less

Less

三种方式引用less

浏览器引用 less.js
Link type=”text/lesss
node中使用
- lesssc less.less
- lessc less.less css.css
- lessc less.less css.css –clean-css
工程中使用
- 在file watch 中添加 less
变量 @key:value
- value 通常带单位，单位运算的时候会保留的
- &：选择器中访问当前选择器
条件语句

在js中，条件语句中可以使用 if,else,switch定义，Less中语句中跟Switch中case比较像。

Less 没有像js中这样的关键字，但是也提供了类似的方法，使用 when 以及 and not 关键字

比较运算符号，less都支持

   > 表示大于> 表示小于>= 表示大于等于<- 表示小于等于= 表示等于

注意比较时候，参量值不要带单位。

同时js中的逻辑运算符号，比喻与或关系，需要使用and 以及 not关键字。

.size(@w,@h) {width: @w;height: @h;background: red;
}// when with great than 200px background id green
.size(@w,@h) when (@w>200) {background: green;
}// when width   great than 200 and less than 500 background id  orange
.size(@w,@h) when (@w>200) and (@w<500) {background: orange;
}// when  width not less or equal 400 background pink
.size(@w,@h) when not (@w <=400) {background: pink;
}div {margin: 20px;
}.section-1 {.size(200px, 100px)
}.section-2 {.size(300px, 100px)
}.section-3 {.size(450px, 100px)
}

内置方法

Less中内置了一些方法，让我们操作数据更加方便。

数学方法

运算：在less中支持运算的，但是css中大多刷都是带单位的，less在计算中支持带单位的计算，并且在单位不统一的时候，会对单位进行换算。但是有一定的规则：

加减法：以第一个数据的单位作为基准，
乘法：也就第一个数字的单位
除法：保留被除数的单位

鉴于此，乘除法尽量只出现一个单位，避免混淆。
Less与js类似的一点，也支持取整，对于数字取整来说，统共有一下方法：
ceil 向上取整
floor 向下取整
round 四舍五入
同时less还允许带单位。
percentage 方法，将数组转换为百分比。（不常用）
max，min等方法也是支持的。并且允许带单位，同时结果单位以选中的结果单位为准，

## 色彩方法

色彩的创建方法
色彩通道方法
色彩的操作方法
色彩的混合方法

色彩的创建方法

根据色彩模式提出的

RGB(red,green,blue)
- red : 表示红色通道 0-255 or 0-100%
- green : 表示绿色通道 0-255 or 0-100%
- blue : 表示蓝色通道 0-255 or 0-100%
RGBA(red,green,blue，alpha)
- red : 表示红色通道 0-255 or 0-100%
- green : 表示绿色通道 0-255 or 0-100%
- blue : 表示蓝色通道 0-255 or 0-100%
- alpha：表示透明度通道0-1 or 0-100%
HSL(hue，saturation,lightness)
- hue : 表示色相 0-360
- saturation : 表示饱和度 0-1 or 0-100%
- lightness : 表示亮度 0-1 or 0-100%
色彩通道方法
RGBA 模式的颜色有四哥通道，红色绿色蓝色以及alpha构成。因此Less提供了一下方法用于获取四个通道的数值。
- red 获得红色通道
  - green 获得绿色通道
  - blue 获得蓝色通道
  - alpha 获得透明度
HSL模式提供了相对应获取色相饱和度亮度的通道。
hue 获得色相
saturation 获得饱和度通道
ligntness 获得亮度通道

// less
@primary-color: #d9d9d9;.dd {width:red(@primary-color)
}
// css
.dd {width: 217;
}

色彩操作方法

Less提供了简单的方法用来操作颜色。如下：

fadein 相对调高透明度
fadeout 相对调低透明度
fade 绝对调整透明度到某一个值

 // less@color: #aaaaaa;
.dd {background-color: @color;&div {color: fade(@color, 30%);}
}
//css
.dd {background-color: #aaaaaa;
}
.dd.dddiv {color: rgba(170, 170, 170, 0.3);
}

同时HSL 模式下，饱和度以及亮度都是可以调节的，LESS 提供相应的方法。

saturate 调高饱和度
desaturate 调低饱和度
lighten 提高亮度
darken 降低饱和度

色彩混合

less 提供了混合色彩的方法，将两个颜色进行混合
mix（color1，color2，weight）

// less
@color1: #112233;
@color2: #332211;
.dd {background-color: @color1;color: @color2;&&li {background-color: mix(@color1, @color2);}
}// css
.dd {background-color: #112233;color: #332211;
}
.dd.ddli {background-color: #222222;
}

避免编译

less 会将自己识别出的语法进行编译，但是有时我们不需要对某一些语法进行编译，LESS 提供了避免编译的方法。

 ddd {width: calc(300px-30px);
}
//会被编译为
ddd {width: calc(270px);
}

为了避免这种情况发生，可以在表达式中加入波折号，并将表达式用单双引号引起来

 ddd {width: `'calc(300px-30px)';
}
//会被编译为
ddd {width: calc(300px-30px);
}