@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