以前同学使用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添加伪类,&表示父类名,从而完成一个简单的,却能够多次使用而不用写坑爹的兼容前缀方法。