我的CSS(3)工具类库(less版)，你会喜欢的

&＃64;charset "utf-8";
&＃64;import "lib/utils.less";
/*!* index.less*/.main { .Clearfix(); }
.notice li { .Text-ellipsis(); }
.comment { .Text-break(); }

&＃64;charset "utf-8";
/*!
* utils.less v3.0
* based on veryless: http://veryless.org/
*/ // 清除(闭合)浮动&＃xff1a;http://www.iyunlu.com/view/css-xhtml/55.html
.Clearfix () { *zoom: 1;&:before, &:after {display: table;content: "";/** Fixes Opera/contenteditable bug:* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952*/line-height: 0;}&:after {clear: both;}
}// inline-block
.Inline-block () { /* 如果有必要可在其父元素上应用样式vertical-align:top; */display:inline-block; *display:inline; *zoom:1;
} // 文字隐藏
.Text-hidden () {/* * 魔鬼的text-indent-9999px:* http://prezi.com/t8yyirefxn2u/text-indent-9999px/ */text-indent: 100%;white-space: nowrap; /* 强制不换行 */overflow: hidden;
}

.Text-ellipsis () {/* * 文字溢出隐藏显示省略号&＃xff0c;需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的) */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}// 文字(强制)折行
.Text-break () {word-wrap:break-word;word-break:break-all;
}// 自定义字体
.Font-face(&＃64;path, &＃64;font-name){&＃64;font-face{font-family: &＃64;font-name;src: url(&＃39;&＃64;{path}/&＃64;{font-name}.eot&＃39;);src: url(&＃39;&＃64;{path}/&＃64;{font-name}.eot?#iefix&＃39;) format(&＃39;embedded-opentype&＃39;),url(&＃39;&＃64;{path}/&＃64;{font-name}.woff&＃39;) format(&＃39;woff&＃39;),url(&＃39;&＃64;{path}/&＃64;{font-name}.ttf&＃39;) format(&＃39;truetype&＃39;),url(&＃39;&＃64;{path}/&＃64;{font-name}.svg#svgFontName&＃39;) format(&＃39;svg&＃39;);}
}// (整体)透明
.Opacity (&＃64;a: 0.3) {&＃64;aa: (&＃64;a*100); opacity: &＃64;a;filter: ~"Alpha(Opacity&＃61;&＃64;{aa})"; /* ie5-8 */*zoom: 1; /* 应用滤镜的元素必须拥有layout */
}
// 背景透明
.Background-rgba (&＃64;r: 0, &＃64;g: 0, &＃64;b: 0, &＃64;a: 0.3) {&＃64;c: rgba(&＃64;r, &＃64;g, &＃64;b, &＃64;a);&＃64;cc: argb(&＃64;c);background-color:&＃64;c;filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType&＃61;0,StartColorStr&＃61;&＃39;&＃64;{cc}&＃39;,EndColorStr&＃61;&＃39;&＃64;{cc}&＃39;)";*zoom: 1;
}
// 圆角
.Border-radius (&＃64;a: 3px) {-webkit-border-radius: &＃64;a;-moz-border-radius: &＃64;a;border-radius: &＃64;a;
}// 阴影
.Box-shadow ( &＃64;a: 0 1px 3px rgba(0,0,0,.3); ) {-webkit-box-shadow: &＃64;a;-moz-box-shadow: &＃64;a;box-shadow: &＃64;a;
}// 渐变
.Linear-gradient (&＃64;a: #ffa600; &＃64;b: #fe9200) {filter: ~&＃39;progid:DXImageTransform.Microsoft.gradient(GradientType&＃61;0, startColorstr&＃61;"&＃64;{a}", endColorstr&＃61;"&＃64;{b}")&＃39;;background-image: -webkit-linear-gradient(top,&＃64;a, &＃64;b);background-image: -moz-linear-gradient(top,&＃64;a, &＃64;b);background-image: -ms-linear-gradient(top,&＃64;a 0,&＃64;b 100%);background-image: -o-linear-gradient(top,&＃64;a, &＃64;b);background-image: linear-gradient(top,&＃64;a, &＃64;b);
}
// 禁用渐变
.Linear-gradientDisable () {background-image: none;filter: progid:DXImageTransform.Microsoft.gradient(enabled&＃61;false); /* 禁用渐变 */
}.Box-sizing ( &＃64;a: content-box ) {-webkit-box-sizing: &＃64;a;-moz-box-sizing: &＃64;a;box-sizing: &＃64;a;
}// 利用边框制作小三角
.Triangle (&＃64;type: bottom, &＃64;x: 10px, &＃64;c: #999, &＃64;y: &＃64;x) {display: inline-block;width:0; height:0; overflow:hidden;
vertical-align: middle;// 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题 &＃64;transparent: &＃64;y dashed transparent; // 该特殊边框的大小必须小于其他边框大小的四倍&＃xff0c;否则IE6会有问题 &＃64;special: &＃64;x solid &＃64;c;.border();.border () when (&＃64;type &＃61; bottom) {border-bottom: &＃64;special;border-left: &＃64;transparent;border-right: &＃64;transparent;}.border () when (&＃64;type &＃61; top) {border-top: &＃64;special;border-left: &＃64;transparent;border-right: &＃64;transparent;}.border () when (&＃64;type &＃61; left) {border-left: &＃64;special;border-top: &＃64;transparent;border-bottom: &＃64;transparent;}.border () when (&＃64;type &＃61; right) {border-right: &＃64;special;border-top: &＃64;transparent;border-bottom: &＃64;transparent;}}// 鼠标经过旋转
.Rotate (&＃64;d: 180deg, &＃64;s: .3s) {-webkit-transition: &＃64;s ease-in;-moz-transition: &＃64;s ease-in;-o-transition: &＃64;s ease-in;transition: &＃64;s ease-in;&:hover, &-hover{-webkit-transform: rotate(&＃64;d);-moz-transform: rotate(&＃64;d);-ms-transform: rotate(0); -o-transform: rotate(&＃64;d);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation&＃61;1);-ms-filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation&＃61;1)";transform: rotate(&＃64;d);}
}// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)
.Grayscale() { -webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); /* Chrome 19&＃43; & Safari 6&＃43; */-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);/* firefox 3.5&＃43;&＃xff0c;慎用&＃xff01;存在性能问题 */ filter: url(&＃39;data:image/svg&＃43;xml;utf8,//www.w3.org/2000/svg\&＃39;>#grayscale&＃39;); filter: gray; /* IE6~9 */
}
.Max-height(&＃64;h, &＃64;pd: 0) {&＃64;Hnum: unit(&＃64;h);&＃64;PDnum: unit(&＃64;pd);max-height: &＃64;h;_height:~"expression( (this.clientHeight-&＃64;{PDnum})>&＃64;{Hnum}? &＃64;{Hnum} : (this.clientHeight-&＃64;{PDnum}) )";_overflow: hidden;_zoom: 1;/*
* clientHeight &＃61; height &＃43; padding;* offsetHeight &＃61; height &＃43; padding&＃43;border;*/
}
.Max-width(&＃64;h, &＃64;pd: 0) {&＃64;Hnum: unit(&＃64;h);&＃64;PDnum: unit(&＃64;pd);max-width: &＃64;h;_width:~"expression( (this.clientWidth-&＃64;{PDnum})>&＃64;{Hnum}? &＃64;{Hnum} : (this.clientWidth-&＃64;{PDnum}) )";_overflow: hidden;_zoom: 1;}
.Min-height(&＃64;h, &＃64;pd: 0) {&＃64;Hnum: unit(&＃64;h);&＃64;PDnum: unit(&＃64;pd);min-height: &＃64;h;_height:~"expression( (this.clientHeight-&＃64;{PDnum})<&＃64;{Hnum}? &＃64;{Hnum} : (this.clientHeight-&＃64;{PDnum}) )";_overflow: hidden;_zoom: 1;}// 一个老外的博客中看到的&＃xff1a;
.Min-height2(&＃64;h) {min-height: &＃64;h;height: auto !important; /*all browsers except ie6 will respect the !important flag*/height: &＃64;h; /*Should have the same value as the min height above*/
}.Min-width(&＃64;h, &＃64;pd: 0) {&＃64;Hnum: unit(&＃64;h);&＃64;PDnum: unit(&＃64;pd);min-width: &＃64;h;_width:~"expression( (this.clientWidth-&＃64;{PDnum})<&＃64;{Hnum}? &＃64;{Hnum} : (this.clientWidth-&＃64;{PDnum}) )";_overflow: hidden;_zoom: 1;}.Clip (&＃64;t: 0px, &＃64;r: 0px, &＃64;b: 0px, &＃64;l: 0px) {position:absolute; clip:rect; /* 矩形剪裁只能作用于 position:absolute|fixed 的元素上 */clip: rect(&＃64;t &＃64;r &＃64;b &＃64;l); /* IE6, IE7 */clip: rect(&＃64;t, &＃64;r, &＃64;b, &＃64;l);
}// 解决Retina屏幕下的图像显示
.Retina-image(&＃64;file-1x, &＃64;file-2x, &＃64;width-1x, &＃64;height-1x) {background-image: url("&＃64;{file-1x}");&＃64;mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and ( min--moz-device-pixel-ratio: 2),only screen and ( -o-min-device-pixel-ratio: 2/1),only screen and ( min-device-pixel-ratio: 2),only screen and ( min-resolution: 192dpi),only screen and ( min-resolution: 2dppx) {background-image: url("&＃64;{file-2x}");background-size: &＃64;width-1x &＃64;height-1x;}
}

.Image-set (&＃64;a1, &＃64;a2) { /* * 解决Retina屏幕下的图像显示&＃xff0c;淘宝首页的css sprite解决方案* image-set是CSS4的属性&＃xff0c;"safari6"和“chrome21”支持* 如果浏览器支持image-set&＃xff0c;普通显屏&＃xff0c;此时浏览器会选择image-set中的&＃64;1x背景图像; Retina屏幕&＃xff0c;此时浏览器会选择image-set中的&＃64;2x背景图像;* 扩展阅读&＃xff1a;http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html*/background: url(&＃64;a1);background-image: -webkit-image-set(url(&＃64;a1) 1x, url(&＃64;a2) 2x);background-image: -moz-image-set(url(&＃64;a1) 1x,url(&＃64;a2) 2x);background-image: -ms-image-set(url(&＃64;a1) 1x,url(&＃64;a2) 2x);background-image: -o-image-set(url(&＃64;a1) 1x,url(&＃64;a2) 2x);background-repeat: no-repeat;
}.User-select(&＃64;select: auto) {-webkit-user-select: &＃64;select;-moz-user-select: &＃64;select;-ms-user-select: &＃64;select;-o-user-select: &＃64;select;user-select: &＃64;select;
}

// “完全居中”: http://codepen.io/shshaw/full/gEiDt
.Absolute-Center() {
　　/*
　　 * 1.必须声明元素[max-]height和[max-]width
　　 * 2.Chrome, Firefox, Safari, Mobile Safari, IE8&＃43;; 不支持Windows Phone无效
　　 */
　　margin: auto;
　　position: absolute;
　　top: 0; left: 0; bottom: 0; right: 0;
　　overflow: auto;
　　resize: both; // 不支持移动版浏览器和IE10-,[可选]
}
// 图片水平垂直居中: http://blog.moocss.com/code-snippets/html-css-code-snippets/1390.html
.Image-center(&＃64;w, &＃64;h: &＃64;w){&＃64;width: unit(&＃64;w);&＃64;height: unit(&＃64;h);&＃64;_fontsize: (&＃64;height * 0.873);width: ~&＃39;&＃64;{width}px&＃39;;height: ~&＃39;&＃64;{height}px&＃39;;overflow: hidden;display: table-cell;vertical-align: middle;text-align: center;*display: block;//IE hack*font: ~"&＃64;{_fontsize}px/1em Arial";img{display: inline;max-height: 100%;max-width: 100%;vertical-align: middle;}
}// CSS3 "栅格化"(flexbox)&＃xff1a;http://www.zhihu.com/question/22991944
.Display-box() {display: -webkit-box; /* Chrome 4&＃43;, Safari 3.1, iOS Safari 3.2&＃43; */display: -moz-box; /* Firefox 17- */display: -webkit-flex; /* Chrome 21&＃43;, Safari 6.1&＃43;, iOS Safari 7&＃43;, Opera 15/16 */display: -moz-flex; /* Firefox 18&＃43; */display: -ms-flexbox; /* IE 10 */display: flex; /* Chrome 29&＃43;, Firefox 22&＃43;, IE 11&＃43;, Opera 12.1/17/18, Android 4.4&＃43; */
}
.Box-flex(&＃64;a) {-webkit-box-flex: &＃64;a;-moz-box-flex: &＃64;a;box-flex: &＃64;a;
}