移动端 第十四章 less功能

第十四章 less 功能

1:less 变量

--css中的颜色和字号使用less 变量来存储

--less 变量的命名 @color:red;

--变量命名的规则：

	1）：必须@符号开头
	2）：名字不能是数字
	3）：名字不能包含特殊字符 @a#!  @~col
	4) ：区分大小写
--@color:red; @n:100px; @font:font-szie:100px; 

2:less 嵌套

–css写法：

	#header {
	  color: black;
	}
	#header .navigation {
	  font-size: 12px;
	}
	#header .logo {
	  width: 300px;
	}

–less写法：

	#header {
	  color: black;
	  .navigation {
	    font-size: 12px;
	  }
	  .logo {
	    width: 300px;
	  }
	}
-- 伪类或者伪类元素的写法必须加&符号
--css写法：
	a:hover{
		color:blue;
	}
--less写法：
	a{
		&:hover{
			color:blue;
		}
	}

3：运算 + - * / （）

--有括号先算括号

--按照运算的优先级运算

--单单位会按照单位显示

	--60px/2=30px 60/20rem=3rem
	
--双单位会按照前面值的单位显示

	--60rem/20px=3rem
	
--字号，宽高，背景色都可以运算

--运算过程中，运算符号两边必须加空格

4:混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

–普通混合

举例：
less--
.w(){
	width: 400px;
	height: 400px;
}

.a{
	.w();
	background: red;
}
.b{
	.w();
	background: yellow;
}
css--
.a {
  width: 400px;
  height: 400px;
  background: red;
}
.b {
  width: 400px;
  height: 400px;
  background: yellow;

–参数混合

less--
举例1：
.w(@a,@b){
	width: @a;
	height: @b;
}

.a{
	.w(100px,200px);
	background: red;
}
.b{
	.w(300px,400px);
	background: yellow;
}
举例2：
.w(@a:100px,@b:200px){
	width: @a;
	height: @b;
}

.a{
	.w();
	background: red;
}
.b{
	.w(300px,400px);
	background: yellow;
}

5:less注释符号：

--单行注释 //
--多行注释 /**/