Less学习

• 变量 - 它可以让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在未来某一天也有可能会实现）。
• 动态计算值 - CSS 中最近出了一个 cal()， 但它只适合用于长度的计算。
  
• Mixins - 可以让你重用或者组合样式，而且支持传递参数。
  
• 函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等。

1.  引用文件

<link rel="stylesheet/less" type="text/css" href='style.less'/>
<script src="less.js"></script>

     less.js是官网文件，style.less就less代码

2.  可定义变量 在.less文件中编写

@color-primary: #5B83AD;
body{
	background-color:@color-primary;
}

3.  可引用定义好的css，并写自己单独样式

.div_test{
	width:50%;
	height:50px;
}
.div_test_1{
     background-color:#fff;
     .div_test
}
.div_test_2{
    background-color:black;
    .div_test
}

4.  嵌套规则

.div_test_3{
	background-color:#fff;
	.div_test_4{
		color:#ff0000;
	}
	.div_test_5{
		color:#00ff00;
	}
}

     等同于

.div_test_3{
    background-color:#fff;	
}
.div_test_3 .div_test_4{
    color:#ff0000;
}
.div_test_3 .div_test_5{
    color:#00ff00;
}

5.函数

降低颜色透明度的函数。

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}