對於做一個站，css寫起來真的很費時間，不是有多難，而是要在多種瀏覽器兼容，特別是像我這種用editplus作為工具的人，寫css快不到哪里去，偶爾在博客園看到有人介紹LESS，去看了一下，真的很不錯，用來生成css很方便，我說的不是用在項目中，而是用來生成css很快，平常寫一些css類似函數吧，用的時候只需要調用生成，很快就可以寫好類，非常方便，這個年代，時間，還有比這更寶貴的嗎？
使用LESS不需要什么基礎，特別是編程人員，使用起來更是得心應手。在使用之前，了解一下注意地方，注釋單行用//就可以了，多行用/* 注釋*/，和PHP是一樣的，變量用@作為開始，這里的變量其實和常量一樣，只能定義一次，以后不能修改的。導入外部css或less文件用@import '文件名.css' ，這里提示一下，less的文件用less作為擴展名的。如果你的頁面中想引入less可以同css一樣的引入方法，個人不建議這么做，雖然有人說less也很快，我建議是寫好less然后生成css更好。
下面先來分享我定義的css3常用代碼的less函數
/*
定義圓角
@radius 圓角大小
*/
.round(@radius:5px){
border-radius:@radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
/*
盒子陰影
@right_left 右邊陰影為正數 左邊負數
@bottom_top 下邊陰影為正數 上邊負數
@box 陰影大小
@box_color 陰影顏色
*/
.boxshadow(@right_left:5px,@bottom_top:5px,@box:5px,@box_color:#b6ebf7){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
/*
文字陰影,可以指定多組陰影
@right_left1 右邊陰影為正數 左邊負數
@bottom_top1 下邊陰影為正數 上邊負數
@text 陰影大小
@text_color 陰影顏色
*/
.textshadow(@right_left1:5px,@bottom_top1:5px,@text:5px,@tetx_color:#b6ebf7){
text-shadow:@arguments;
}
/*
透明度 或漸變 1為不透明 0透明
css3 rgba(110, 142, 185, .4)!important;前三個是顏色值 后一個是透明值
用來兼容所有瀏覽器
*/
.rgba(@rgba_a:.4,@rgb_b:40){
filter: alpha(opacity=@rgb_b);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})";
opacity:@rgb_a;
}
/*
列布局
@c1 列數
@c2 列寬
@c3 列間距
@c4 邊框樣式
*/
.column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){
column-count:@c1;
column-width:@c2;
column-gap:@c3;
column-rule:@c4;
-webkit-column-count:@c1;
-webkit-column-width:@c2;
-webkit-column-gap:@c3;
-webkit-column-rule:@c4;
-moz-column-count:@c1;
-moz-column-width:@c2;
-moz-column-gap:@c3;
-moz-column-rule:@c4;
}
/*
畫輪廓 就是內部框
@outline 樣式
@outline1 間距 負數在內部
*/
.outline(@outline:1px solid #699,@outline1:-10px){
outline:@outline;
outline-offset:@outline1;
}
/*背景漸變
@start 漸變開始顏色
@end 結束顏色
*/
.bg(@start:#00ffff,@end:#9fffff){
background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
background:-moz-linear-gradient(top,@start,@end);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,endColorstr=@end,grandientType=0);
}
/*
旋轉角度
IE不支持 濾鏡支持0，1，2，3
*/
.rotate(@ro:30deg){
transform: rotate(@ro);
-webkit-transform: rotate(@ro);
-moz-transform: rotate(@ro);
-o-transform: rotate(@ro);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/*
過度動畫
id是css屬性
2s過度時間 0s是開始時間
ease-in進入
*/
.tran(@t:id 2s ease-out 0s){
transition:@t;
-moz-transition:@t;
-o-transition:@t;
-webkit-transition:@t;
}
上邊就是css3的幾個效果類，比如調用圓角方法，直接寫#div{.round;}就會生成默認圓角5px的效果，要生成10px的呢，就寫成#div{.round(10px);}是不是很方便呢？對於顏色和長度單位，還可以進行+ - * /四則運算，可以實現快速變化長度顏色。定義寬度@width:2px;@width *3;就表示6px，顏色類似運算。如果想定義字符串如：@str:'www.x.com';當然官方還有高級應用介紹，不過一般寫css用的很少，這里主要是常用的，就是用來方便寫css，我這里這是列舉了css3的幾種方法，因為css3為了兼容多種瀏覽器，往往css代碼特別多，這是一個簡化css代碼的好方法，css2里面有些也可以自己定義，我們還可以寫一個頁面，專門用來定制自己需要的類的效果。
好了，less就說這么多，其實記住一個，就是用@定義變量，然后像寫函數寫css，就可以使用了，下載less：
http://lesscss.googlecode.com/files/less-1.3.0.min.js
頁面中只需要這樣就可以了
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
第一行是你的less代碼，第二行是用來解析less的，如果你也想像我一樣生成css來使用，到http://www.oschina.net/tools/less來編譯吧。
(原創 by yoby)