Less使用——讓老司機帶你飛

為什么我要使用Less

    less的作為編寫css的工具插件，省時、方便、檢測，具體的安裝，請參考我的一篇文章《sublime text3 個人使用心得》，里面我講解了安裝方法，使用webstorm的乘客，我會再寫一篇配合使用less的文章的。

Now，get up my car , I will take with you to fly!

   

* LESS語法
--------------------------------------------------變量-------------------------------------------------
* 【變量】
    less文件 css文件

       less文件                             Css文件

@nice-blue: #5B83AD;                       #header {        
@light-blue: @nice-blue + #111;               color: #6c94be;
                                           }                
#header {                      
   color: @light-blue;          
} 

 

【變量詳解:】
* 作為屬性值，加減乘除
   @base: 5%;
   @filler: @base * 2; => 10%
   @other: @base + @filler; => 15%
   color: #888 / 4; => #222
   background-color: @base-color + #111;
   height: 100% / 2 + @filler; => 60%
   @var: 1px + 5; => 6px

* 用於選擇器

       less文件                             CSS文件

       @my-selector:banner;               .banner{
       .@{my-selector}{                      font-weight: bold; 
          font-weight: bold;              }
       }

* 用於URL

       @images: "../img";
       body {
         background:url("@{images}/white-sand.png");
       }

 

 

* import表達式（注意:less中可以使用，css中不能用，因為這會增加客戶端請求資源）

@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";
這樣在該less文件中，就引入了其他less文件了，NB不

 

* 用於屬性名

       @property:color;                         .widget {                                              
       .widget {                                    color: #0ee;           
         @{property}: #0ee;                         background-color: #999;
         background-@{property}:#999;           }                        
       } 

 

* 用於變量名

       @fnord:"I am fnord.";
       @var:"fnord";                    
       content:@@var;                     content:"I am fnord.";

 

* 變量是延遲加載的，不一定要在使用之前定義

       .lazy-eval-scope {       .lazy-eval-scope {
         width: @var;                    width: 9%;      
         @a: 9%;                   }                 
       }                                          
       @var: @a;

 

* 當變量被多次定義時，以最后一次定義為准，且從當前作用域向上搜尋

       @var: 0;                     .class {        
       .class {                               one:1;      
         @var: 1;                         }              
         .brass {                        .class .brass {
           @var: 2;                           three:3;    
           three: @var;                  }              
           @var: 3;    
         }             
         one: @var;    
       }    

 

* 默認值:可以建立變量庫來統一設定默認值，然后通過重新定義來覆蓋變量

@base-color:green;
@dark-color:darken(@base-color,10%);
@import "library.less";
@base-color: red;

 

【變量混合模式】:某一個/些引入其它定義好的樣式

    less文件                                    css文件
   
    .bordered {                                .bordered {                       
       border-top: dotted 1px black;               border-top: dotted 1px black;   
       border-bottom: solid 2px black;             border-bottom: solid 2px black; 
    }                                            }                                 
    #menu a {                                    #menu a {                         
      color: #111;                                 color: #111;                    
      .bordered;                                   border-top: dotted 1px black;   
    }                                            border-bottom: solid 2px black;                              
    .post a {                                    }                                 
      color: red;                                .post a {                         
      .bordered;                                   color: red;                     
    }                                              border-top: dotted 1px black;   
                                                           border-bottom: solid 2px black; 
                                                         }

* 支持帶參混合：該樣式不會出現在.css中，推薦此種寫法
.樣式1( ){ ... } 
.樣式2(@num1, @num2){ ... }
.樣式3(@num: 默認值){ ... }

------------------------------------嵌套 子元素的樣式 可以在父元素的樣式里面定義---------------------------------------------------------------

less的套子寫法，令我由無法自拔，到挺身而出，真是透心涼、心飛揚呀，不好意思，一激動就想開火車，我忘了我TM還在寫技術博客呢，sorry，那么現在我們吸收LESS的精子..不...是精華了....

   原來                           使用嵌套
   
   #header {                     #header {           
     color: black;                    color: black;     
   }                                  .navigation {     
   #header .navigation {                  font-size: 12px;
     font-size: 12px;                 }                 
   }                                  .logo {           
   #header .logo {                        width: 300px;   
     width: 300px;                    }                  
   }                              }   

學會這種寫法，媽媽再也不用擔心我寫錯層級類名了

 

* &符號:代表this，也就當前這一層的元素

   less文件                          CSS文件
   
   .clearfix {                      .clearfix {          
     display: block;                    display: block;    
     zoom: 1;                           zoom: 1;           
                                      }                    
     &:after {                    .clearfix:after {    
       content: " ";                content: " ";      
       display: block;              display: block;    
       font-size: 0;                font-size: 0;      
       height: 0;                   height: 0;         
       clear: both;                 clear: both;       
       visibility: hidden;          visibility: hidden;
     }                            }                    
   }    

 

* @Media, @supports and @document

   less文件                             CSS文件

   .screen-color {                     @media screen {                         
     @media screen {                     .screen-color {                     
       color:green;                        color: green;                     
       @media(min-width:768px){             }                                   
         color:red;                    }                                     
       }                               @media screen and (min-width: 768px) {
     }                                   .screen-color {                     
     @media tv {                           color: red;                       
       color: black;                     }                                   
     }                                 }                                     
   }                                   @media tv {                           
                                                 .screen-color {                     
                                                    color: black;                     
                                                  }                                   
                                                }  

 

* #
less文件 CSS文件

#a { #a {
color: blue; color: blue;
@font-face { }
src: made-up-url; @font-face {
} src: made-up-url;
padding: 2 2 2 2; }
} #a {
padding: 2 2 2 2;
}
-------------------------------------注釋--------------------------------------------------------------
"//"用於注釋內容，在CSS文件中不可見
/**/，在CSS文件中可顯示，但是被注釋的

---------------------------------------------------------------------------------------------------
* Function

    less文件                                        CSS文件
    
    @base: #f04615;                                 .class {                    
    @width: 0.5;                                          width:50%;               
    .class {                                                color:#f6430f;           
       width:percentage(@width);                        background-color: #f8b38d;
       color:saturate(@base,5%);                     }                           
       background:spin(lighten(@base,25%),8);
    }

本人也只是學習了一點less的皮毛，less有很多內容，但個人感覺不是很實用，在使用過程中，變量、函數、嵌套，是用的最多的，限於自身的長度，不能再深入了，下面是個人編寫的公共less庫，

    在個人的less文件中，引入common.less庫， @import url(common.less);   然后調用里面的參數即可，也可以結合自身習慣編寫自己的公共庫

個人common.less文件

 
@charset 'utf-8';
//常用變量及樣式定義，作為一個工具Less被其他Less
//字體大小:默認14px
//去除a和label的虛線
.remove_dotted(){
  a,label {blr:~'expression(this.onFocus=this.blur())'}
  a,label {outline:none;}
}
.font(@size:14px){
    font-size:@size;
}
.h100(){
    height:100%;
}
.w100(){
    width:100%;
}
//邊框設置
.border(@w:1px,@c:#eee){
    border:@w solid @c;
}
//定位
.pos(r){
    position:relative;
}
.pos(a){
    position:absolute;
}
.pos(f){
    position:fixed;
}
//背景圖片,.bg("..images/1.png");
.bg(@url){
    background:url(@url) no-repeat;
}
//浮動,div{.fr;}
.fl(){
    float:left;
}
.fr(){
    float:right;
}

.list-sn(){
    list-style:none;
}
//垂直居中
.pos-box-cc(@w,@h,@pos:absolute){
    width:@w;
    height:@h;
    left:50%;
    top:50%;
    margin:-@w/2 0 0 -@h/2;
}
.bc(){
    margin:0 auto;
}
//文字居中
.tc(){
    text-align:center;
}
//文字垂直居中
.tcc(@h){
    text-align:center;
    line-height:@h;
}
.l-h(@h){
    height:@h;
    line-height:@h;
}
//display
.d-b(){
    display:block;
}
.d-i(){
    display:inline;
}
.d-ib(){
    display:inline-block;
    *display:inline;
    *zoom:1;
}
.d-t(){
    display:table;
}
.d-n(){
    display:none;
}
.t-n(@p:none){
    text-decoration:@p;
}
.tc(){
    text-align:center;
}
.tl(){
    text-align:left;
}
.tr(){
    text-align:right;
}
//圓角
.radius(@r){
    -webkit-border-radius:@r;
       -moz-border-radius:@r;
            border-radius:@r;
}

//三角形
.triangle(top,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:#eee){
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;

}
.triangle(left,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:dashed dashed solid dashed;
}

.triangle(right,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent transparent transparent @c;
    border-style:solid dashed dashed dashed;

}
.triangle(@_){
    width:0;
    height:0;
    overflow:hidden;
}
.clearfix(){
  *zoom: 1;
  &:before,
  &:after{
    display:table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

.box-sizing(@box){
  -webkit-box-sizing:@box;
     -moz-box-sizing:@box;
      -ms-box-sizing:@box;
       -o-box-sizing:@box;
              sizing:@box;
}
.box-shadow(@shadow){
  -webkit-box-shadow:@shadow;
     -moz-box-shadow:@shadow;
      -ms-box-shadow:@shadow;
       -o-box-shadow:@shadow;
              shadow:@shadow;
}

//過度
.transition(@trans){
    -webkit-transition:@trans;
       -moz-transition:@trans;
        -ms-transition:@trans;
         -o-transition:@trans;
            transition:@trans;
}
.transform-origin(@origin){
    -webkit-transition-origin:@origin;
       -moz-transition-origin:@origin;
        -ms-transition-origin:@origin;
         -o-transition-origin:@origin;
            transition-origin:@origin;
}
.transform(@transform){
    -webkit-transform:@transform;
       -moz-transform:@transform;
        -ms-transform:@transform;
         -o-transform:@transform;
            transform:@transform;
}
.create3d(@h){
  -webkit-perspective:@h;
          perspective:@h;
}
.use3d(){
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

//動畫
.animation(@as){
    -webkit-animation:@as;
       -moz-animation:@as;
         -o-animation:@as;
            animation:@as;
}
.trans3d(){
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.trans-origin(@to){
  -webkit-transform-origin:@to;
     -moz-transform-origin:@to;
          transform-origin:@to;
}