less练习之transition

以前同学使用sass写css，说比较好用，而且看起来有点高大上。作为初级web前端的我，刚好遇到bootstrap的使用，为了更好学会它，我选择less操作css。

less和sass语法相对简单，内置函数目前没用到，一切刚开始。从慕课网，网易云等视频网站看了一些免费基础视频，现在开始敲代码。

网上很多案例都是关于css3的，说是弥补浏览器兼容，试了一下，还挺爽，但这不是我想要的。我是冲着less方便快捷，避免重复，利于后期维护才学的，随着学习深入，应该很快就能够体会到。

上一段less代码

// css3 transition控制

.tran(@property){
	-webkit-transition:@property 2s ease-out;
	-moz-transition:@property 2s ease-out;
	-o-transition:@property 2s ease-out;
	transition:@property 2s ease-out;
}

.transition{width: 100px;height: 100px;background:red;position: relative;
		.tran(width);
		&:hover{
				width:500px;
			}
		}

以上是通过.tran(@property)写好相关的transition兼容属性，往后在transition的div中使用它，也就是混合，在使用&:hover添加伪类，&表示父类名，从而完成一个简单的，却能够多次使用而不用写坑爹的兼容前缀方法。