Less小談

1.Less是什麼？

 

        1.Less 是一門 CSS 預處理語言，就是css語言的超集，比css更豐滿，它擴展了 CSS 語言，增長了變量、Mixin（混合語法）、函數等特性，使 CSS 更易維護和擴展。

        

        2.Less 能夠運行在 Node 或瀏覽器端。能夠直接把樣式文件「style.css」直接改爲「style.less」，能正常工做。如：<link rel="stylesheet" href="1.less">（成功了）

        3.瀏覽器端用法

               須要一個腳本的支持，這個腳本咱們把他叫作less.js（須要下載）

               代碼<link rel="stylesheet/less" type="text/css" href="styles.less" />

              <script src="less.js" type="text/javascript"></script>

 

2.Less有什麼呢？

      1.變量

                   1.定義變量
                        @變量名：變量值

                 2.使用

                   代碼以下：

                           @w:100px;

                            body{

                                   width:@w;

                                    }

           2.能夠嵌套

                代碼以下：

                      如：body{

                                         width:100px;

                                            p{
                                         height:100px;
                                              }
                                          }

            3.Minxin

                Minxin其實也是一種嵌套，它充許你將一個類嵌入到另外一個類中，而被嵌入的這個類也稱爲是一個變量。就是你能夠用一個類定義CSS，而後把整個爲看成一個變量來使用，嵌入到另外一個類中看成它的屬性。   

                  代碼以下：              

                                  /* 定義一個類 */
                                .r(@radius: 5px) {
                                          -moz-border-radius: @radius;
                                          -webkit-border-radius: @radius;
                                            border-radius: @radius;
                                       }
                                /* 定義的類應用到另個一個類中 */
                                  ＃header {
                                     .r;
                                    }
                                   #footer {
                                   .r(10px);
                                      }

 

                 

            4.Import

                     咱們能夠在開發階段將樣式放到多個文件中，最後經過@import 的方式合併,還能夠相互引用。
                               // main.less
                                     @btnColor: red;
                                     @import url('_buttom.less');

                                     body{
                                      width: 1024px;
                                         }

                              // _buttom.less
                                   .btn{
                                    color: @btnColor;
                                       }

         5.函數
                       內置函數

                               - lighten：將一個顏色變亮
                               + lighten(#000, 10%); // #1a1a1a
                                - darken：將一個顏色變暗
                               + darken(#000, 10%); // #e6e6e6

       總結：以上是我我的理解的東西，若有錯誤，歡迎指出！