less的理解與使用

Less : 指動態樣式語言，通過間接明瞭的語法進行定義,是編寫css的工作變動非常簡單,並且本質上,less包含了一套自定義的語法以及一個解析器,它可以使用函數,變量等其他功能,使Css的編譯更加方便
一 . Less的安裝
Less可以安裝在多種環境中,這裏只列舉使用nodeJS的方法安裝Less

1. 搭建nodeJS環境
   在nodeJS官網中下載並安裝環境(nodeJS的官網點此鏈接)
   在以下頁面中安裝nodeJS環境
   

2. 檢測nodeJS是否安裝成功
   在電腦桌面點擊鍵盤的 Window+R鍵,調出運行窗口,輸入cmd進入控制檯
   在控制檯輸入node -v判斷nodeJS是否安裝成功
   

3. 搭建Less環境
   nodeJS安裝成功後,使用npm install -g less在線安裝Less

4. 檢測Less是否搭建完畢
   

5. 在HBuilder中創建Less環境
   

   在彈出框中選中Less並雙擊
   

6. 檢測是否創建成功
   新建一個工程,創建less文件,如果成功,會在當前文件夾創建一個相同名稱的css文件

二. Less的使用

變量是Less中很重要的一個因素,在less中,使用@符號創建變量,舉例如下
less中代碼

@width:30px;
@height:20px;

div{
    width: @width;
    height: @height;
}

生成的css代碼

div {
  width: 30px;
  height: 20px;
}

而在less中可以嵌套使用css的代碼,舉例如下:
less中代碼

@width:30px;
@height:20px;
@back:red;

div{
    width: @width;
    height: @height;
    ul{
        width: 20px;
        li{
            width: 20px;
            >a{
                background: @back;
            }
            &:before{
                width: 20px;
            }
        }
    }
}

css中代碼

div {
  width: 30px;
  height: 20px;
}
div ul {
  width: 20px;
}
div ul li {
  width: 20px;
}
div ul li > a {
  background: red;
}
div ul li:before {
  width: 20px;
}

補充 :
css3中新添加的長度單位

​rem和em單位是由瀏覽器基於你設計中的字體大小計算得到的一個像素值

em是基於使用他們的元素字體的大小

rem是基於html字體大小

em單位可能受到任何繼承的父元素的字體大小影響

rem單位可以重瀏覽器字體大小設置字體大小