Less小结

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

引入Less

	<!-- 浏览器端引入less文件 -->
    <link rel="stylesheet/less" href="./css/index.less">
    
    <!-- 浏览器端编译less文件的 -->
    <script src="./js/less.min.js"></script>

一 .变量

less声明的变量存在全局和局部变量
声明使用关键字符 @

.less文件中：

	@width:100px;
	@height:100px;
	.box1{
   
	    @color: #000;
	    width: @width;
	    height: @height;
	    border: 1px solid @color;
	}

二 .混合

less的混合 类似js的函数
是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

	@bgColor:#000;
	@fColor:#fff;
	.btn1{
   
	    .setColor
	}
	.btn2{
   
	    .setColor
	}
	.btn3{
   
	    .setColor 
	}
	//封装简单函数
	.setColor{
   
	    background-color: @bgColor;
	    color: @fColor;
	}

	@width:100px;
	@height:100px;
	@radius:25px;
	.btn1{
   
	    .setSize(@width * (1/2),@height - 50);  //不能直接做除运算
	    .setRadius(30px);
	}