less編寫css代碼

原文 http://segmentfault.com/a/1190000004137275

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

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

準備

1. 電腦上的sublime已經安裝了Less2Css插件。

   </li>

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

   </li> </ol>

   使用（簡單）

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

      </li>

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

      </li> </ol>

      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;
         }