快速生成CSS--LESS學習總結

　　　　對於作一個站，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)