less編寫css代碼

css編寫樣式表我想你們應該都已經熟悉了。我在這裏說的是使用sublime的插件進行less樣式的編寫，使用起來比本來的直接編寫css樣式，更加的簡單與方便，css代碼也變得更加的整齊。

sublime上直接使用less編寫css代碼

準備

1. 電腦上的sublime已經安裝了Less插件。(npm install less -gd)

2. 電腦上安裝了nodejs,並全局安裝lessc插件。

使用（簡單）

1. 直接新建一個aa.less的文件，在其中編寫less的代碼。

2. ctrl+s保存下，在目錄中出現aa.css文件能夠直接在頁面中使用。

less的簡單介紹

什麼是less

LESSCSS是一種動態樣式語言，屬於css預處理語言的一種，它使用相似css的語法，爲css的賦予了動態語言的特性，如變量，繼承，運算，函數等，更加方便css的編寫和維護。

變量

變量容許咱們單獨定義一系列通用的樣式，而後在須要的時候去調用。

@color:#4d926F;
#header{
   color:@color;
}
h2{
   color:@color
}
//編譯後--
#header{
   color:#4d926F;
}
h2{
   color:#4d926F;
}

混合

能夠將一個定義好的classA 輕鬆的引入到另一個classB中。

.rounded-corners (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }   
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(10px);
    }
    // 編譯後 --
     #header {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    #footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

嵌套（最常使用）

咱們能夠在一個選擇器中嵌套一個選擇器來實現繼承，這樣很大程度減小了代碼量，而且代碼看起來更加的清晰。

#header{
      h1{
        font-size:26px;
        font-weight:bold;
      }
      p{
        font-size:12px;
        a{
          text-decoration: none;
          &:hover{
            border-width: 1px;
          } 
        }
      }
   }
   // 編譯後 --
   #header h1 {
    font-size: 26px;
    font-weight: bold;
   }
   #header p {
    font-size: 12px;
   }
   #header p a {
    text-decoration: none;
   }
   #header p a:hover {
    border-width: 1px;
   }

函數和運算

運算提供了加，減，乘，除操做；咱們能夠作屬性值和顏色的運算，這樣就能夠實現屬性值直接的複雜關係。

@the-border: 1px;
   @base-color: #111;
   @red:        #842210;
    
   #header {
        color: (@base-color * 3);
        border-left: @the-border;
        border-right: (@the-border * 2);
   }
   #footer {
        color: (@base-color + #003300);
        border-color: desaturate(@red, 10%);
   }
   // 編譯後--
   #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
   }
   #footer {
        color: #114411;
        border-color: #7d2717;
   }