less通用pc移动库

// less 文件 (移动端通用less文件)
// 作者 marchen
// 时间 2014/9/1
// 协议 MIT
// 只考虑webkit内核手机浏览器和火狐内核浏览器

// 自定义less 混合函数
/*********** CSS3样式合集 *************/
//盒子模型 边框计算
.border-box() {
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

//圆角
.border-radius(@radius:2px) {
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius:@radius;
}

//变形
.transform(@all) {
-moz-transform:@all;
-webkit-transform:@all;
transform:@all;
}

//过渡
.transition(@all) {
-moz-transition:@all;
-webkit-transition:@all;
transition:@all;
}
//常用过渡
.transiton() {
-moz-transition:all .7s .1s ease;
-webkit-transition:all .7s .1s ease;
transition:all .7s .1s ease;
} /*可以自定义修改*/

//动画
.animation(@all) {
-moz-animation:@all;
-webkit-animation:@all;
animation:@all;
}
//常用动画
.animation(@name) {
-moz-animation:@name 1s 0s 1 ease both;
-webkit-animation:@name 1s 0s 1 ease both;
animation:@name 1s 0s 1 ease both;
}

//字体特效
.text-shadow-light(@blur:2px) {
text-shadow: 0px 0px @blur white;
}/*可发挥想象定义常用字体特效*/

//盒子阴影
.box-shadow(@all) {
-moz-box-shadow:@all;
-webkit-box-shadow:@all;
box-shadow: @all;
}
//常用盒子阴影
.box-shadow-light(@blur) {
-moz-box-shadow:0px 0px @blur white;
-webkit-box-shadow:0px 0px @blur white;
box-shadow: 0px 0px @blur white;
}

//文字旋转
.text-rotate(@angle:45deg) {
-webkit-transform: rotate(@angle);
-moz-transform: rotate(@angle);
transform:rotate(@angle);
}

//字体
.font-face(@fontname,@fontdir) { //字体名称 string 字体文件目录
@font-face {
font-family: @fontname;
src: url('@{fonturl}/@{fontname}.eot');
src: url('@{fonturl}/@{fontname}.eot?#iefix') format('embedded-opentype'),
url('@{fonturl}/@{fontname}.woff') format('woff'),
url('@{fonturl}/@{fontname}.ttf') format('truetype'),
url('@{fonturl}/@{fontname}.svg#@{fontname}') format('svg');
font-weight: normal;
font-style: normal;
}
}

//渐变 (简单的二种颜色的渐变)
.linear-gradient(@angle:45deg,@start-color:rgba(0,0,0,1),@stop-color:rgba(255,255,255,1) {
background: -moz-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, @start-color), color-stop(100%, @stop-color)); /* safari4+,chrome */
background: -webkit-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* safari5.1+,chrome10+ */
background: linear-gradient(@angle, @start-color 0%, @stop-color 100%); /*w3c*/
}

/******************************************* 小工具 *********************************************/
//长单词强制换行
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
/******************************************* 各种移动端bug修复 **********************************/

//去掉手持设备点击时出现的透明层(一般在头部做格式化)
.delete-highlight(){
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
}

//去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果
.delete-appearance() {
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-appearance: none;
}
}

//移动端bug汇总
//bug一：现象：
//android4.0以上一部分手机的webview中，当canvas小于屏幕大小时，绘图时会出现重影，就是说一个图只绘制了一遍，却出现了两个解决方案：canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);*/

//bug二：
//现象：android4.x中一部分手机，在改变canvas大小的时候有时会卡死。大家可能都知道，重新设定canvas的大小可以实现canvas的完全刷新，但是也会导致一部分4.x手机卡死。
//解决方案：用clearRect刷新canvas。*/

//欢迎更新更多的bug

上面的一旦定义好的话,下次就直接.border-box()这样调用就行了.省了不少时间.感觉很棒.当然做事不能只做不一般.是吧.这个 在上一道pc端的兼容less代码.

/**
 * author marchen
 * time 2014/8/20
 * MIT
 * style 编译为css后在运行
 */

/////////////////////less maxmin will be delete ////////////////////////////////
//border-radius
 .border-radius(@width:2px) {
    border-radius: @width;

-moz-border-radius: @width;

-webkit-border-radius: @width;

-o-border-radius: @width;

-ms-border-radius: @width;

}
//transform-origin
 .transform-origin(@x:center,@y:center) {
    transform-origin: @x @y;

-webkit-transform-origin: @x @y;

-moz-transform-origin: @x @y;

-o-transform-origin: @x @y;

-ms-transform-origin: @x @y;

}
//perspective-origin
 .perspective-origin(@x:center,@y:center) {
    perspective-origin: @x @y;

-webkit-perspective-origin: @x @y;

-moz-perspective-origin: @x @y;

-o-perspective-origin: @x @y;

-ms-perspective-origin: @x @y;

}
//transform-style
 .transform-style(@style:flat) {
    transform-style: @style;

-moz-transform-style: @style;

-webkit-transform-style: @style;

-o-transform-style: @style;

-ms-transform-style: @style;

}
//transform
 .transform(@rotate:0deg,@scale:0,@skew:0deg,@translate:0px) {
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);

-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);

-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);

-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);

-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);

}
//animate
 .animate(@all) {
    animation: @all;

-webkit-animation: @all;

-moz-animation: @all;

-o-animation: @all;

-ms-animation: @all;

}
.animate(@name,@duration:1s,@delay:0s,@ease:ease,@count:1,@direction:normal,@end:both) {
    animation: @name @duration @delay @count @ease @end @direction;

-webkit-animation: @name @duration @delay @count @ease @end @direction;

-moz-animation: @name @duration @delay @count @ease @end @direction;

-o-animation: @name @duration @delay @count @ease @end @direction;

-ms-animation: @name @duration @delay @count @ease @end @direction;

}
//transition
 .transition(@all) {
    transition: @all;

-webkit-transition: @all;

-moz-transition: @all;

-o-transition: @all;

-ms-transition: @all;

}
.transition(@property,@duration:0.7s,@delay:0.1s,@ease:ease) {
    transition: @arguments;

-webkit-transition: @arguments;

-moz-transition: @arguments;

-o-transition: @arguments;

-ms-transition: @arguments;

}
//text-shadow  text effect
 .text-shadow(@all) {
    text-shadow: @all;

}
.text-shadow(@color:black,@x:1px,@y:1px,@offset:2px) {
    text-shadow: @arguments;

}
.text-light(@color:white,@blur:15px) {
    text-shadow: 0px 0px@blur @color;

}
.text-apple(@tcolor:#000,@x:0,@y:1px,@blur:1px,@color:#fff) {
    color: @tcolor;

text-shadow: @x @y @blur @color;

}
.text-emboss() {
    color: #ccc;
    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;
}
.text-blur(@color:black,@blur:5px) {
    color: transparent;
    text-shadow: 0 0@blur @color;

}
//box-shadow
 .box-shadow(@all) {
    box-shadow: @all;

-moz-box-shadow: @all;

-webkit-box-shadow: @all;

-o-box-shadow: @all;

-ms-box-shadow: @all;

}
.box-shadow(@x:0px,@y:0px,@blur:2px,@color:#605F5F) {
    box-shadow: @arguments;

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

-o-box-shadow: @arguments;

-ms-box-shadow: @arguments;

}
//text-rotation
 .text-rotation(@rotate:0deg) {
    transform: rotate(@rotate);

-webkit-transform: rotate(@rotate);

-moz-transform: rotate(@rotate);

-o-transform: rotate(@rotate);

-ms-transform: rotate(@rotate);

writing-mode: lr-tb;
}
//备用动画