@charset "utf-8";
/*!
* utils.less v3.0
* based on veryless: http://veryless.org/
*/
// 清除(闭合)浮动：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 () {
/*
* 文字溢出隐藏显示省略号，需要用在与文字最近的一个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(@path, @font-name){
@font-face{
font-family: @font-name;
src: url('@{path}/@{font-name}.eot');
src: url('@{path}/@{font-name}.eot?#iefix') format('embedded-opentype'),
url('@{path}/@{font-name}.woff') format('woff'),
url('@{path}/@{font-name}.ttf') format('truetype'),
url('@{path}/@{font-name}.svg#svgFontName') format('svg');
}
}
// (整体)透明
.Opacity (@a: 0.3) {
@aa: (@a*100);
opacity: @a;
filter: ~"Alpha(Opacity=@{aa})"; /* ie5-8 */
*zoom: 1; /* 应用滤镜的元素必须拥有layout */
}
// 背景透明
.Background-rgba (@r: 0, @g: 0, @b: 0, @a: 0.3) {
@c: rgba(@r, @g, @b, @a);
@cc: argb(@c);
background-color:@c;
filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='@{cc}',EndColorStr='@{cc}')";
*zoom: 1;
}
// 圆角
.Border-radius (@a: 3px) {
-webkit-border-radius: @a;
-moz-border-radius: @a;
border-radius: @a;
}
// 阴影
.Box-shadow ( @a: 0 1px 3px rgba(0,0,0,.3); ) {
-webkit-box-shadow: @a;
-moz-box-shadow: @a;
box-shadow: @a;
}
// 渐变
.Linear-gradient (@a: #ffa600; @b: #fe9200) {
filter: ~'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="@{a}", endColorstr="@{b}")';
background-image: -webkit-linear-gradient(top,@a, @b);
background-image: -moz-linear-gradient(top,@a, @b);
background-image: -ms-linear-gradient(top,@a 0,@b 100%);
background-image: -o-linear-gradient(top,@a, @b);
background-image: linear-gradient(top,@a, @b);
}
// 禁用渐变
.Linear-gradientDisable () {
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* 禁用渐变 */
}
.Box-sizing ( @a: content-box ) {
-webkit-box-sizing: @a;
-moz-box-sizing: @a;
box-sizing: @a;
}
// 利用边框制作小三角
.Triangle (@type: bottom, @x: 10px, @c: #999, @y: @x) {
display: inline-block;
width:0; height:0; overflow:hidden;
vertical-align: middle;
// 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题
@transparent: @y dashed transparent;
// 该特殊边框的大小必须小于其他边框大小的四倍，否则IE6会有问题
@special: @x solid @c;
.border();
.border () when (@type = bottom) {
border-bottom: @special;
border-left: @transparent;
border-right: @transparent;
}
.border () when (@type = top) {
border-top: @special;
border-left: @transparent;
border-right: @transparent;
}
.border () when (@type = left) {
border-left: @special;
border-top: @transparent;
border-bottom: @transparent;
}
.border () when (@type = right) {
border-right: @special;
border-top: @transparent;
border-bottom: @transparent;
}
}
// 鼠标经过旋转
.Rotate (@d: 180deg, @s: .3s) {
-webkit-transition: @s ease-in;
-moz-transition: @s ease-in;
-o-transition: @s ease-in;
transition: @s ease-in;
&:hover, &-hover{
-webkit-transform: rotate(@d);
-moz-transform: rotate(@d);
-ms-transform: rotate(0);
-o-transform: rotate(@d);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(@d);
}
}
// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)
.Grayscale() {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Chrome 19+ & Safari 6+ */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
/* firefox 3.5+，慎用！存在性能问题 */
filter: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale');
filter: gray; /* IE6~9 */
}
.Max-height(@h, @pd: 0) {
@Hnum: unit(@h);
@PDnum: unit(@pd);
max-height: @h;
_height:~"expression( (this.clientHeight-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";
_overflow: hidden;
_zoom: 1;
/*
* clientHeight = height + padding;
* offsetHeight = height + padding+border;
*/
}
.Max-width(@h, @pd: 0) {
@Hnum: unit(@h);
@PDnum: unit(@pd);
max-width: @h;
_width:~"expression( (this.clientWidth-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";
_overflow: hidden;
_zoom: 1;
}
.Min-height(@h, @pd: 0) {
@Hnum: unit(@h);
@PDnum: unit(@pd);
min-height: @h;
_height:~"expression( (this.clientHeight-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";
_overflow: hidden;
_zoom: 1;
}
// 一个老外的博客中看到的：
.Min-height2(@h) {
min-height: @h;
height: auto !important; /*all browsers except ie6 will respect the !important flag*/
height: @h; /*Should have the same value as the min height above*/
}
.Min-width(@h, @pd: 0) {
@Hnum: unit(@h);
@PDnum: unit(@pd);
min-width: @h;
_width:~"expression( (this.clientWidth-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";
_overflow: hidden;
_zoom: 1;
}
.Clip (@t: 0px, @r: 0px, @b: 0px, @l: 0px) {
position:absolute; clip:rect; /* 矩形剪裁只能作用于 position:absolute|fixed 的元素上 */
clip: rect(@t @r @b @l); /* IE6, IE7 */
clip: rect(@t, @r, @b, @l);
}
// 解决Retina屏幕下的图像显示
.Retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
background-image: url("@{file-1x}");
@media
only 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("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
.Image-set (@a1, @a2) {
/*
* 解决Retina屏幕下的图像显示，淘宝首页的css sprite解决方案
* image-set是CSS4的属性，"safari6"和“chrome21”支持
* 如果浏览器支持image-set，普通显屏，此时浏览器会选择image-set中的@1x背景图像; Retina屏幕，此时浏览器会选择image-set中的@2x背景图像;
* 扩展阅读：http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html
*/
background: url(@a1);
background-image: -webkit-image-set(url(@a1) 1x, url(@a2) 2x);
background-image: -moz-image-set(url(@a1) 1x,url(@a2) 2x);
background-image: -ms-image-set(url(@a1) 1x,url(@a2) 2x);
background-image: -o-image-set(url(@a1) 1x,url(@a2) 2x);
background-repeat: no-repeat;
}
.User-select(@select: auto) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// “完全居中”: http://codepen.io/shshaw/full/gEiDt
.Absolute-Center() {
/*
* 1.必须声明元素[max-]height和[max-]width
* 2.Chrome, Firefox, Safari, Mobile Safari, IE8+; 不支持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(@w, @h: @w){
@width: unit(@w);
@height: unit(@h);
@_fontsize: (@height * 0.873);
width: ~'@{width}px';
height: ~'@{height}px';
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
*display: block;//IE hack
*font: ~"@{_fontsize}px/1em Arial";
img{
display: inline;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
}
// CSS3 "栅格化"(flexbox)：http://www.zhihu.com/question/22991944
.Display-box() {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
.Box-flex(@a) {
-webkit-box-flex: @a;
-moz-box-flex: @a;
box-flex: @a;
}
发表评论：