前端學習筆記（八）:less 基礎

維護css弊端

CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念。

• CSS 須要書寫大量看似沒有邏輯的代碼，CSS 冗餘度是比較高的。

• 不方便維護及擴展，不利於複用。

• CSS 沒有很好的計算能力

• 非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼項目。

Less 介紹

Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成爲CSS預處理器。

作爲 CSS的一種形式的擴展，它並無減小CSS的功能，而是在現有的CSS語法上，爲CSS加入程序式語言的特性。

它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS的維護成本，就像它的名稱所說的那樣，Less可讓咱們用更少的代碼作更多的事情。

Less中文網址：http://lesscss.cn/

常見的CSS預處理器：Sass、Less、Stylus

一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性。

Less安裝

①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/

②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd）  ---輸入「node –v」查看版本便可

③基於nodejs在線安裝Less，使用cmd命令「npm install -g less」便可

④檢查是否安裝成功，使用cmd命令「 lessc -v 」查看版本便可

Less 使用之變量

變量是指沒有固定的值，能夠改變的。由於咱們CSS中的一些顏色和數值等常常使用。

@變量名:值;

• 必須有@爲前綴

• 不能包含特殊字符

• 不能以數字開頭

• 大小寫敏感

@color: pink;

Less 編譯 vocode Less 插件

Easy LESS 插件用來把less文件編譯爲css文件

安裝完畢插件，從新加載下 vscode。

只要保存一下Less文件，會自動生成CSS文件。

Less 嵌套

// 將css改成less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

若是碰見 （交集|僞類|僞元素選擇器） ，利用&進行鏈接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

Less 運算

任何數字、顏色或者變量均可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。

/*Less 裏面寫*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至還能夠這樣 */
width: (@width + 5) * 2;

• 乘號（*）和除號（/）的寫法  

• 運算符中間左右有個空格隔開 1px + 5

• 對於兩個不一樣的單位的值之間的運算，運算結果的值取第一個值的單位

• 若是兩個值之間只有一個值有單位，則運算結果就取該單位