您的位置：首页 > Web前端 > CSS

less的实践笔记

2015-11-27 16:59 691 查看

##less的使用示例

普通函数

参数前缀使用@

.icon(@width, @height) {
display: block;
width: @width;
height: @height;
}
.icon-1(@width, @height){
display: block;
width: @width*1px;
height: @height*1px;
}

a{.icon(400px,300px);}
span{.icon-1{400,300}}

带css-hack的写法
同函数名但不同签名的函数

// 兼容IE7+的input元素写法
@ie8-10-fix:~"\0";
@placeholderColor: #a8acb4;
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom){
height: 1px*@lineHeight;
line-height: 1px*@lineHeight;
padding-top:1px*@paddingTop;
padding-bottom: 1px*@paddingBottom;
height: @height*1px@ie8-10-fix;
line-height:@height*1px@ie8-10-fix;
padding-top: 0px@ie8-10-fix;
padding-bottom: 0px@ie8-10-fix;
*height: 1px*@height;
*line-height: 1px*@height;
*padding-top: 0;
*padding-bottom: 0;
&::-webkit-input-placeholder {color:@placeholderColor;}
&:-moz-placeholder {color:@placeholderColor;}
&::-moz-placeholder {color:@placeholderColor;}
&:-ms-input-placeholder {color:@placeholderColor;}
}
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom,@placeholderColor){
height: 1px*@lineHeight;
line-height: 1px*@lineHeight;
padding-top:1px*@paddingTop;
padding-bottom: 1px*@paddingBottom;
height: @height*1px@ie8-10-fix;
line-height:@height*1px@ie8-10-fix;
padding-top: 0px@ie8-10-fix;
padding-bottom: 0px@ie8-10-fix;
*height: 1px*@height;
*line-height: 1px*@height;
*padding-top: 0;
*padding-bottom: 0;
&::-webkit-input-placeholder {color:@placeholderColor;}
&:-moz-placeholder {color:@placeholderColor;}
&::-moz-placeholder {color:@placeholderColor;}
&:-ms-input-placeholder {color:@placeholderColor;}
}

@args的使用

.animation(@arg){
-moz-animation:@arg;
-webkit-animation:@arg;
-o-animation:@arg;
-ms-animation:@arg;
animation:@arg;
}

&{}的使用
两个keyframes的对比

原始版：

.keyframes(@name) {
@-webkit-keyframes @name {
.-frames(-webkit-);
}
@-moz-keyframes @name {
.-frames(-moz-);
}
@-o-keyframes @name {
.-frames(-o-);
}
@-ms-keyframes @name {
.-frames(-ms-);
}
@keyframes @name {
.-frames();
}
}

// 动画写法
&{
.keyframes(bounce);
.-frames(@-...){
0% {@{-}transform:translate3d(0, 0,0);}
25% {@{-}transform:translate3d(0,-5px,0);}
50% {@{-}transform:translate3d(0,0,0);}
75% {@{-}transform:translate3d(0,5px,0);}
100% {@{-}transform:translate3d(0, 0,0);}
}
}

//使用示例
.elem{.animation(bounce .8s infinite linear);}

优化版：

.keyframes(@name, @frames) {
@-webkit-keyframes @name { @frames(); }
@-moz-keyframes @name { @frames(); }
@-ms-keyframes @name { @frames(); }
@-o-keyframes @name { @frames(); }
@keyframes @name { @frames(); }
}

/**
.keyframes(demo_keyframes, {
100% {.transform(rotate(360-43deg));}
});

.element{.animation(demo_keyframes .3s linear);}
*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： less css sass

相关文章推荐

新的分享

章节导航