less css學習與內容整理（包括css命名）

LESS CSS是什麼？

• less css是一種動態樣式語言，屬於css預處理語言的一種，爲css賦予了動態語言的特性，例如變量，繼承，運算，函數等，更方便維護和編寫css。
• less css可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

less 並沒有裁剪css原有的特性，更不是用來取代css的，而是在現有css語法的基礎上，爲css加入程序式語言的特性。

---

LESS如何使用？

在客戶端使用

不經過編譯，直接在瀏覽器中使用

• 在頁面中引入.less文件

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

• 引用外部less.js文件/或官網下載less.js

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>
//<script src="lesscss-1.4.0.min.js"></script>

在引入.less 文件時，rel 屬性要設置爲“stylesheet/less”。
less 源文件一定要在less.js 引入之前引入，這樣才能保證 LESS 源文件正確編譯解析。

在服務器端使用

LESSCSS官方有一款基於Node.js的庫，用於編譯.less文件。使用時，首先全局安裝 less（部分系統下可能需要在前面加上sudo切換爲超級管理員權限）：

npm install -g less

接下來用lessc編譯.less文件：

lessc styles.less styles.css

使用其他編譯工具

在線less css編輯器
koala(Win/Mac/Linux)編輯工具。下載
WinLess(Win)編輯軟件。下載

---

LESS常用語言特性

更多特性查詢

變量

變量允許我們單獨定義一系列通用的樣式，然後在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

less源碼：

@color: #333;
header {
  background: @color;
}
h1 {
  color: @color;
}

編譯後的css：

header {
  background: #333333;
}
h1 {
  color: #333333;
}

混合（Mixins）

混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。

less源碼：

.rounded-corners (@radius: 3px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#section {
  .rounded-corners;
}
.aside {
  .rounded-corners(5px);
}

編譯後的css：

#section {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.aside {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

嵌套

less源碼：

#header {
  h1 {
    font-size: 20px;
    font-weight: bold;
  }
  p {
    font-size: 14px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}

編譯後的css：

#header h1 {
  font-size: 20px;
  font-weight: bold;
}
#header p {
  font-size: 14px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  color: red;
}

p.s.通過使用&運算符，可以重複引用父選擇器，而不是使用其名稱，在選擇器&中可以多次使用。

函數和運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的複雜關係。

less源碼：

@base-border: 1px;
@base-color: #333;

#header {
  color: (@base-color * 3);
}
#footer {
  border: (@base-border + 5px);
}

編譯後的css：

#header {
  color: #999999;
}
#footer {
  border: 6px;
}

---

同類框架還有sass : 與less相比，兩者都屬於css預處理器，功能上大同小異，都是使用類似程序式語言的方式書寫css, 都具有變量、混入、嵌套、繼承等特性，最終目的都是方便css的書寫及維護。

---

其他拓展

關於css命名：要在學習完less後看，不然更頭疼。常見class關鍵詞很重要。
CSS BEM 書寫規範
css進階：You Don’t Need JavaScript