一、 LESS是什么？
LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。.LESS既可以在客户端上运行，也可以借助Node.js或者Rhino在服务端运行。将.less文件编译后为正常的css样式
二、 如何使用LESS
在html文件中引入less文件：<link href="less文件地址" rel="stylesheet/less">引入Less.js文件：<script src="文件地址"></script>
三、 LESS基础语法
1. 变量
① 声明变量：@变量名：值; ② 使用变量：@变量名
在定义以及使用变量时，当对同一变量二次赋值时，会有作用域的问题，导致二次赋值以后的所有使用都为新值。在给有单位的属性赋值时，变量赋值必须要带单位
@color1
:red
;
.borderColr
{
@radius
:50%;
background
:@color1
border
-radius
:@radius
}
@color1
:green
;
.test
{
border
-radius
:@radius
;
background
:@color1
;
}
2. 混合
混合可以将一个定义好的class A轻松引入到另一个class B中，从而实现class B继承class A的所有样式。还可以带参调用，就和调用方法一样。不传参调用不需要带括号。传参调用需要带括号。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
{
background
:red
;
border
-radius
:10px
;
height
:200px
;
}
3. 嵌套规则
我们可以在一个选择器里嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。&代表本身，若在一个选择器中添加&:hover代表给本身添加hover样式
#header
{
h1
{
font
-size
: 26px
;
font
-weight
: bold
;
}
p
{
font
-size
: 12px
;
a
{
text
-decoration
: none
;
&:hover
{ border
-width
: 1px
}
}
}
}
#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. 加减运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系属性值的加减运算是带单位运算。颜色的运算时符号和值之间必须要有空格，否则报错，eg： 错误：@bgcolor-@bgcolor2；正确：@bgcolor - @bgcolor2
@w
:100px
;
@h
:100px
;
@bgcolor
:#ff0000
;
@bgcolor2
:#
009991;
.sn
{
width
: @w
*2;
height
: @h
*2;
border
: 1px solid @color
;
background
-color
: @bgcolor
- @bgcolor2
;
}
5. 颜色的函数
lighten(color,百分比)：100%为白色，0%为原色。百分比越大颜色越亮dark(color,百分比)：100%为黑色，0%为原色。百分比越大颜色越暗saturate(color，百分比)：增大饱和度。但给普通颜色设置饱和度无变化。给hsl(..,..,..)设置饱和度有变化desaturate(color，百分比)：降低饱和度fadein(颜色，百分比)：增加颜色的不透明度fadeout(颜色,百分比)：减少颜色的不透明度spin(颜色，度数)：度数为数字。用于旋转所选颜色的角度（在颜色拼盘上逆时针旋转）mix(color1,color2)：混合两个颜色
6. Math函数
不可用下面三个函数拼接字符串给属性赋值（会在数字和字符串间自动生成一个空格）。但可直接用于相加减，也可直接对带px单位的属性做运算
round(num)：四舍五入ceil(num)：向上取整floor(num)：向下取整percentage(num):将一个数转成百分比
@a
:round(200.6);
@height
:200.266px
;
@height
:round(200.6)px
;
.sx
{
height
: round(@height
);
height
:round(@height
)+@a
;
height
:@a
+"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");
9. 避免编译：加上~可不对后面的内容进行编译
有时我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，需要使用~，将其后面的内容不进行编译而直接输出字符串可用""将避免编译的内容包含起来
.class {
filter
: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
.class {
filter
: ms
:alwaysHasItsOwnSyntax
.For
.Stuff();
}
10.模式匹配和导引表达式
① 模式匹配
可根据不同的赋值起到模式匹配的作用。只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。下例中，mixin、switch都是名称，可换。默认匹配的参数名也可换
@
switch:dark
;
.mixin (dark
, @color
) {
color
: darken(@color
, 10%);
}
.mixin (light
, @color
) {
color
: lighten(@color
, 10%);
}
.mixin (@_
, @color
) {
display
: block
;
}
.class {
.mixin(@
switch, #
888);
}
.class {
display
: block
;
color
: darken(#
888, 10%);
}
② 导引
when关键字被定义为一个导引序列，只有当when括号中的判断为真时才会采用该混合，否则不采用导引中可用运算符：>、<、>=、<=、=（判断左右两边是否相等）导引中只有关键字true为真，其余值都被视为布尔假导引序列使用,分割不同的条件，当所有条件中任意一个条件符合时都会被视为匹配成功。在导引序列中可以使用and关键字实现与条件，使用not关键字实现非运算。,实现或运算如果想要基于值类型进行匹配，有几个函数： ① iscolor(变量) ② isnumber(变量) ③ isstring(变量) ④ iskeyword(变量) ⑤ isurl(变量)如果要判断一个值是纯数字还是某个单位量，可用以下函数 ① ispixel(数字)：是否为带像素单位的值 ② ispercentage(数字)：是否为百分数 ③ isem(数字)
