less的基本语法以及使用

最近在项目的开发过程中，发现自己的css的代码的层级解构不明确，而且很多的地方写的比较凌乱。在后期添加功能的过程中，往往都是在上面加一段css,有时候比较懒，就会直接缀在css代码的最后。这往往导致在后期修改css代码的时候，很不容易找到自己的代码。
less的出现很大程度上的帮我们解决了这个问题。less是css的预处理语言，它扩展了css语言，增加了变量，Minix,函数等特性。使用了less之后它会使你的css的结构更加明确，代码更加简洁，重用率更高，也方便后期的维护。
下面我们来说一说它的基本用法：
1.结构

.wrap{
	color:#333;
	padding:20px;
	.box{
		width:20px;
		height:20px;;
		border:1px solid #666;
		&:hover{
			width:30px;
			height:30px;
			border:1px solid #e56366;
		}
	}
}
转义后的结果为：
.wrap {
  color: #333;
  padding: 20px;
}
.wrap .box {
  width: 20px;
  height: 20px;
  border: 1px solid #666;
}
.wrap .box:hover {
  width: 30px;
  height: 30px;
  border: 1px solid #e56366;
}

2.变量

@base-color:#3636d5;
@high-color:@base-color+#111;
#box{
	color:@base-color;
	background:@high-color;
}
转为css：

#box {
  color: #3636d5;
  background: #4747e6;
}

3.混入

.show{
	border:1px solid #000;
	color:#363636;
}
.menu{
	margin-top:20px;
    .show;
}
.list{
	background:#e2e2e2;
	.show();
}
转化后的结果为：
.show {
  border: 1px solid #000;
  color: #363636;
}
//以下的两种方法都可行
.menu {
  margin-top: 20px;
  border: 1px solid #000;
  color: #363636;
}
.list {
  background: #e2e2e2;
  border: 1px solid #000;
  color: #363636;
}

4.计算

@conversion-1: 5cm + 10mm;     //  6cm
@conversion-2: 2 - 3cm - 5mm;       // 1.5cm
@incompatible-units: 2 + 5px - 3cm;        // 4px
@base: 5%;
@filler: @base * 2;      //  10%
@other: @base + @filler;     //  15%

5.函数

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width);
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
转化后的结果：
.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

6.命名空间

#bundle{
	.button{
		background:#e2e2e2;
		color:#3636363;
		padding:5 10px;
		margin:0 10px;
	}
	.border{
		border-top:1px solid #666;
		border-radius:5px;
	}
}
#box{
	width:45px;
	height:32px
	line-height:32px;
	#bundle > .button;
}
转化后的结果为:
#bundle .button {
  background: #e2e2e2;
  color: #363636;
  padding: 5px 10px;
  margin: 0 10px;
}
#bundle .border {
  border-top: 1px solid #666;
  border-radius: 5px;
}
#box {
  width: 45px;
  height: 32px;
  line-height: 32px;
  background: #e2e2e2;
  color: #363636;
  padding: 5px 10px;
  margin: 0 10px;
}

7.可变插值

@selector:box;
@img: "../../assets";
@themes: "../../src/themes";
@property: color;
#@{selector}{
	width:100px;
	height:100px;
	background:#e2e2e2;
}
#content {
  background: url("@{img}/user-acvtor.png");
}
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
@import "@{themes}/lib.less";
转化后的结果：
#box {
  width: 100px;
  height: 100px;
  background: #e2e2e2;
}
#content {
  background: url("../../assets/user-acvtor.png");
}
.widget {
  color: #0ee;
  background-color: #999;
}
@import "../../src/themes/lib.less";

8.默认变量
引入less之后，再定义变量，覆盖之前的样式
9.扩展

#item(){
	width:200px;
	min-height:200px;
	display:flex;
	jusitify-content:space-between;
	aling-items:center;
}
#box{
	margin-top:20px;
	#item;
}
转义后的结果：
#box {
  margin-top: 20px;
  width: 200px;
  min-height: 200px;
  display: flex;
  jusitify-content: space-between;
  aling-items: center;
}
使用()之后在其他选择器中混入，页面中不会再出现该样式。

以上所有就是less的基本语法了，其中extend的语法，大家感兴趣的话，可以自行到文档中查找。下期不见不散！

欢迎大家一起交流。