LESS CSS非常实用实例应用
@charset "UTF-8";
@base-color:#333;
// 圆角
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
//四角半径定制
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border-radius: @topleft @topright @bottomright @bottomleft;
}
//阴影
.box-shadow (@x: 0px, @y: 0px, @blur: 5px, @color:#999) {
-webkit-box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
box-shadow: @x @y @blur @color;
}
//内阴影
.box-shadow-inset (@x: 0px, @y: 0px, @blur: 5px, @color:#999) {
-webkit-box-shadow: @x @y @blur @color inset;
-moz-box-shadow: @x @y @blur @color inset;
box-shadow: @x @y @blur @color inset;
}
//过渡效果
.transition (@prop: all, @time: .3s, @ease: linear) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
transition: @prop @time @ease;
}
//转换
.transform (@rotate: 90deg, @scale: 1, @skew: 0deg, @translate: 10px) {
-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);
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
//颜色渐变
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}
//rgba
.rgba(@r,@g,@b,@a){
@c: rgba(@r,@g,@b,@a);
@c2 :argb(@c);
/* for IE9 IE8 IE7 not sure about IE6*/
filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
background-color:@c;
:root &{
/*
* IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除
* \9 代表 IE9 以下浏览器支持
* :root 只有 IE9+ 以及其他现代浏览器支持
* IE10 以上不再支持 filter
*/
filter:none;
}
}
//设置透明度
.opacity(@number){
/* older safari/Chrome browsers */
-webkit-opacity: @number/100;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: @number/100;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: @number/100;
/* IE9 + etc...modern browsers */
opacity: @number/100;
/* IE 4-9 */
filter:alpha(opacity=@number);
/*This works in IE 8 & 9 too*/
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=@number);
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=@number);
}
//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:myanimate,@animation-duration:2s,@animation-timing-function:linear,
@animation-delay:0s,@animation-iteration-count:infinite,@animation-direction:normal){
animation: @arguments;
/* Firefox: */
-moz-animation: @arguments;
/* Safari 和 Chrome: */
-webkit-animation: @arguments;
/* Opera: */
-o-animation: @arguments;
}
.keyframes(@name:myanimate){
@keyframes @name{
0% {}
25% {}
50% {}
75% {}
100% {}
}
@-webkit-keyframes @name{
0% {}
25% {}
50% {}
75% {}
100% {}
}
@-moz-keyframes @name{
0% {}
25% {}
50% {}
75% {}
100% {}
}
@-o-keyframes @name{
0% {}
25% {}
50% {}
75% {}
100% {}
}
}
//设置中心点
.origin(@x:50%,@y:50%){
transform-origin:@x @y;
-ms-transform-origin:@x @y; /* IE 9 */
-webkit-transform-origin:@x @y; /* Safari 和 Chrome */
-moz-transform-origin:@x @y; /* Firefox */
-o-transform-origin:@x @y; /* Opera */
}
//设置盒模型
.box-sizing(@box:border-box){
box-sizing:@box;
-moz-box-sizing:@box; /* Firefox */
-webkit-box-sizing:@box; /* Safari */
}
//设置缩放比例
.scale (@scale: 1) {
-webkit-transform: scale(@scale);
-moz-transform: scale(@scale);
-o-transform: scale(@scale);
-ms-transform: scale(@scale);
transform: scale(@scale);
}
//绕Y轴旋转角度
.rotateY (@rotate: 90deg) {
-webkit-transform: rotateY(@rotate);
-moz-transform: rotateY(@rotate);
-o-transform: rotateY(@rotate);
-ms-transform: rotateY(@rotate);
transform: rotateY(@rotate);
}
//文本垂直居中
.ver-m(@height:0px){
height: @height;
line-height: @height;
}
//三角绘制
.sanjiao(@top:@base-color,@left:transparent,@bottom:transparent,@right:transparent,@width:10px){
width:0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:@width;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:@top @left @bottom @right;
}
//超出显示省略号
.ellipsis(){
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
//inline-block
.inline-block(){
display:inline-block;
zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
}
如何使用Less并监听
<link rel="stylesheet/less" type="text/css" href="{%$rootpath%}css/index.less" /> <script src="{%$rootpath%}js/less.js" type="text/javascript" ></script> <script>less.watch();</script>
在node.js环境下：
npm install -g less
用git 将less文件编译成css文件
lessc index.less>index.css
用git 将less文件编译成css压缩文件
lessc index.less>index.css -x
