定义圆角及调用
/*
定义圆角
@radius 圆角大小
*/
.round(@radius:5px){
border-radius:@radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.round7{
.round(7px);
}
定义盒子阴影及调用
/*
盒子阴影
@right_left 右边阴影为正数 左边负数
@bottom_top 下边阴影为正数 上边负数
@box 阴影大小
@box_color 阴影颜色
*/
.boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
.boxshadow7{
.boxshadow(7px,7px,7px,black);
}
定义文字阴影及调用
/*
文字阴影,可以指定多组阴影
@right_left1 右边阴影为正数 左边负数
@bottom_top1 下边阴影为正数 上边负数
@text 阴影大小
@text_color 阴影颜色
*/
.textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){
text-shadow:@arguments;
}
.r_b_textshadow{
.textshadow();
}
定义透明度及调用
/*
透明度 或渐变 1为不透明 0透明
css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值
用来兼容所有浏览器
*/
.rgba(@rgba_a:.4,@rgb_b:40){
filter: alpha(opacity=@rgb_b);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})";
opacity:@rgb_a;
}
.rgba4{
.rgba();
}
定义列布局及调用
/*
列布局
@c1 列数
@c2 列宽
@c3 列间距
@c4 边框样式
*/
.column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){
column-count:@c1;
column-width:@c2;
column-gap:@c3;
column-rule:@c4;
-webkit-column-count:@c1;
-webkit-column-width:@c2;
-webkit-column-gap:@c3;
-webkit-column-rule:@c4;
-moz-column-count:@c1;
-moz-column-width:@c2;
-moz-column-gap:@c3;
-moz-column-rule:@c4;
}
.my_column{
.column(3,50px,3px,1px solid #ccc);
}
定义背景渐变及调用
/*背景渐变
@start 渐变开始颜色
@end 结束颜色
*/
.bg(@start :#00ffff,@end :#9fffff){
background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
background:-moz-linear-gradient(top,@start ,@end);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,
endColorstr=@end ,grandientType=0);
}
.my_bg{
.bg(red,yellow);
}
定义轮廓内部框及调用
/*
画轮廓 就是内部框
@outline 样式
@outline1 间距 负数在内部
*/
.outline(@outline:1px solid #699,@outline1:-10px){
outline:@outline;
outline-offset:@outline1;
}
.my_outline{
.outline();
}
定义旋转，菱形旋转，缩放，移动及调用
/*
旋转角度
@ro定义度数
IE不支持 滤镜支持0，1，2，3
*/
.rotate(@ro :30deg){
transform: rotate(@ro);
-webkit-transform: rotate(@ro);
-moz-transform: rotate(@ro);
-o-transform: rotate(@ro);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotate50{
.rotate(50deg);
} /*
菱形旋转角度
@x横向缩放比例
@y纵向缩放比例
*/
.skew(@roX :30deg,@roY :30deg){
transform: skew(@roX,@roY);
-webkit-transform: skew(@roX,@roY);
-moz-transform: skew(@roX,@roY);
-o-transform: skew(@roX,@roY);
-ms-transform: skew(@roX,@roY) ;
}
.skew30{
.skew(50deg);
} /*
放大缩小
@x横向缩放比例
@y纵向缩放比例
*/
.scale(@x :1.2,@y :1.2){
transform: scale(@x,@y);
-webkit-transform: scale(@x,@y);
-moz-transform: scale(@x,@y);
-o-transform: scale(@x,@y);
-ms-transform: scale(@x,@y);
}
.my_scale{
.scale();
} /*
移动距离
@x横向移动距离
@y纵向移动距离
*/
.translate(@x :80px,@y :80px){
transform: translate(@x,@y);
-webkit-transform: translate(@x,@y);
-moz-transform: translate(@x,@y);
-o-transform: translate(@x,@y);
-ms-transform: translate(@x,@y);
}
.translate80{
.translate();
} /*
综合上面4种变化,效果看下面的过度动画
@rotate
@scale
@skew
@translate
*/
.transform(@rotate :360deg,@scaleX :1,@scaleY :1,@skewX :0deg,@skewY :0deg,@translateX :100px,@translateY :0px){
transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
-webkit-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
-moz-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
-o-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
-ms-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.my_transform{
.transform();
}
定义过度动画及调用
/*
过度动画
id是css属性
2s过度时间 0s是开始时间
ease-in进入
*/
.tran(@t :id 2s ease-in 0s){
transition:@t ;
-moz-transition:@t ;
-o-transition:@t ;
-webkit-transition:@t ;
}
.my_tran{
&:hover{
.transform();
.tran(all 2s ease-in 0s);
}
}
定义Animation动画及调用
/*
less文件中定义的函数
Animation 动画
@animation-name规定需要绑定到选择器的 keyframe 名称
@animation-duration规定完成动画所花费的时间，以秒或毫秒计,默认是 0。
@animation-timing-function规定动画的速度曲线。默认是 "ease"。
@animation-delay规定在动画开始之前的延迟。默认是 0。
@animation-iteration-count规定动画应该播放的次数。默认是 1。
@animation-direction规定是否应该轮流反向播放动画。默认是 "normal"。
*/
.animation(@animation-name,@animation-duration,@animation-timing-function,
@animation-delay,@animation-iteration-count,@animation-direction){
animation: @arguments;
/* Firefox: */
-moz-animation: @arguments;
/* Safari 和 Chrome: */
-webkit-animation: @arguments;
/* Opera: */
-o-animation: @arguments;
}
.my_animation{
.animation(mykeyframes,5s,linear,2s,infinite,normal);
} /***CSS定义的keyframes如下：****/
@keyframes mykeyframes
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
} @-moz-keyframes mykeyframes /* Firefox */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
} @-webkit-keyframes mykeyframes /* Safari 和 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
} @-o-keyframes mykeyframes /* Opera */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
参考引用
http://my.oschina.net/u/98589/blog/57510
http://lesscss.org/
http://www.w3school.com.cn/
http://www.css3maker.com/
Less在线编译工具：
http://tool.oschina.net/less