CSS預編譯語言Less的用法總結

huanghui8030發表於2018-05-09

CSS編譯

1、什麼是Less？

less官網：Less is More , Than CSS -少即是多，比CSS

官網gitHub：https://github.com/less/less.js

1.1 Less介紹

Less是一門css預處理語言，或是一種動態樣式語言。擴充套件了css語言，增加了變數、繼承、巢狀、運算、函式等特性，使css更易維護和擴充套件。（類似jquery）

Less既可以在瀏覽器端上執行（支援IE7+、chrome、ff等主流瀏覽器，不支援iPad 待測試），也可以在Node伺服器端執行。

例如：

@base: #f938ab;
@width:200px;
.box-shadow(@style, @c) when (iscolor(@c)) {
    width:@width;
    height:@width;
    margin-top:20px;
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  .div1 { .box-shadow(0 0 5px, 30%) }
  .div2{
      .box-shadow(5px 5px 5px 5px,@base);
  }
}

解析：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box .div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  color: #fff;
  margin-top: 20px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.box .div2 {
  width: 200px;
  height: 200px;
  background-color: red;
  color: #fff;
  margin-top: 20px;
  -webkit-box-shadow: 5px 5px 5px 5px #f938ab;
  box-shadow: 5px 5px 5px 5px #f938ab;
}

現在流行的css預編譯語言：Less和Sass

1.2 Less的優點

簡單，易於維護，CSS管理更加容易
高效的進行開發
使用Less實現配色將變得非常容易。
與CSS能夠很好地融合使用。
同時相容CSS3

2、如何呼叫less

2.1 Less呼叫方法

運用GUI工具運用工具koala或者SimpLess是來自動解析成.css檔案（已給大家講過，這裡不在重複）
引用less.js進行解析，在頁面引入less.js對.less檔案進行解析。
less官網線上解析：http://less2css.org
運用node來解析成css
利用gulp等自動化工具進行解析研究中

2.2 GUI工具Koala

Source Map：編譯過程中生成 css 對應的 map 檔案。除錯時使用，有了source map，瀏覽器裡直接顯示less，非常方便
Line Comments：保留註釋，勾選後編譯中在註釋上一行新增一條空行。
Autoprefix：自動給 CSS3 元素加上瀏覽器字首。
參考：知乎

2.3 伺服器端解析： less.js解析

第一步，引入styls.less，注意 rel=“stylesheet/less”

1、內聯樣式：
```
<style type="text/less">
  // less 程式碼
</style>
```

2、外聯樣式

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

第二步，引數配置（可省略）具體意思待研究

<!-- 在引入less.js之前配置引數項 -->
<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>

引數	型別	預設值	引數	說明
evn	String	取決於頁面的URL		可以在development或是production環境下執行。
logLevel	Number	2	2 – 提示資訊（Information）和錯誤（errors）1 – 錯誤（Errors）0 – 空（Nothing）	javascript控制檯日誌量（錯誤等級）。注意：在production環境下，獲取不到日誌。
async	Boolean	false	false、true	是否非同步匯入檔案
fileAsync	Boolean	false	false	使用檔案協議訪問頁面時非同步載入匯入的檔案。
poll	Integer	1000		在監視模式下，每兩次請求之間的時間間隔（ms）。
functions	Object	空		在functions這個物件中，key作為函式的名字。
dumpLineNumbers	String	空	comment、mediaQuery、all	當設定dumpLineNumbers直接輸出源行資訊到編譯好的CSSS的檔案中時，有利於你除錯指定行。
relativeUrls	Boolean	false		是否調整相對路徑。如果為false，則url已經是相對於入口的LESS檔案。
rootpath	String	false		新增到每個URL開始處的路徑

第三步，引入less.js，在此前加入.less檔案。
```
<script src="less.js" type="text/javascript"></script>
```

第二步和第三步一起

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars=`{ myvar: "#ddffee", mystr: ""quoted"" }` rel="stylesheet/less" type="text/css" href="less/styles.less">

注意：
- 如果載入多個.less樣式表檔案，每個單獨編譯，一個檔案中定義的任何變數都無法再其他檔案中訪問。不會存在變數重複問題。
- 在伺服器環境下使用，本地直接開啟可能會報錯！
- Less相容IE7+，如需相容則需要先引入es5-shim.js即可。
- 其中還有一些高階配置，也可通過瀏覽器直接除錯，具體見參考文件。
- 不建議使用，增加伺服器壓力，不利於除錯。

2.4 Node解析

先按照node.js
下載less的管理工具包
```
$ sudo npm install -g less
```
執行方法解析成css檔案
```
$ lesssc styles.less styles.css
```

解析成min.css檔案，安裝clean-css

$ npm install clean-css

$ lessc --clean-css styles.less styles.min.css

less命令列用法

node上安裝即時編譯的外掛

$ (sudo) npm install -g less-watch-compiler
$ less-watch-compiler path_input path_out
$ less-watch-compiler path_input path_out fileName.less

新增廠商字首

$(sudo) npm install -g less-plugin-autoprefix
$ less inputFile.less outFile.less —autoprefix=“browsers”
$ lessc test.less test.css --autoprefix="ie >= 8, last 3 versions, > 2%"

2.5 IDE 對應的外掛

SublimeText：Less-sublime、Sublime-Less-to-CSS、Less-build-sublime、SublimeOnSaveBuild
Dreamweaver：DMXzone Less CSS Compiler
Notepad++ 6.x：less.js語法高亮
Brackets：內建支援語法高亮，還有一些擴充套件BracketLESS

3、Less語法詳解

3.1 註釋

/** 可解析 **/
//不可解析

3.2 變數

變數@來定義，允許單獨定義一系列通用的樣式，然後在需要的時候進行呼叫。

//less                          
@cGray:#ccc; 
@cRed:red;
@width:80px;
@height:120px;
.div1{
  color:@cGray;
  border:1px solid @cGray;
  width:@width;
  height:@height;
}
.div2{
  color:@cRed;
  background:@cGray;
  width:@height;
  height:@width;
}

 /*生成的css*/
.div1 {
  color: #cccccc;
  border: 1px solid #cccccc;
  width: 80px;
  height: 120px;
}
.div2 {
  color: #ff0000;
  background: #cccccc;
  width: 120px;
  height: 80px;
}

3.3 巢狀

在一個選擇其中巢狀另一個選擇器來實現繼承，減少程式碼量，程式碼更清晰。程式碼優化考慮，最多巢狀三層。

有&時解析的是同一個元素或此元素的偽類，沒有&解析是後代元素

// LESS
#demo2 {
  h2 {
    font-size: 18px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    color:#90bd39;
    a { text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }
}

/* 生成的 CSS */
#demo2 h2 {
  font-size: 18px;
  font-weight: bold;
}
#demo2 p {
  font-size: 12px;
  color:#90bd39;
}
#demo2 p a {
  text-decoration: none;
}
#demo2 p a:hover {
  text-decoration: underline;
}

3.4 運算

運算提供了加減乘除操作，可以對任何數字、顏色、變數進行運算，可以實現屬性值之間的複雜關係。和Javascript程式碼一樣。

//less
@basewidth: 100px;
@baseColor: #111;
@blue: #09c;
.div1 {
  color: @baseColor * 3;
  height: @basewidth;
  width: @basewidth * 2;
}
.div2 { 
  color: @baseColor + #003300;
  background-color: desaturate(@blue, 10%);
}

/* 生成的 CSS */
.div1 {
  color: #333333;
  height: 100px;
  width: 200px;
}
.div2 { 
  color: #114411;
  background-color: #0a94c2;
}

運算有順序，和平時的四則運算一樣

@var: 20px;
.div3 {
  width: @var + 5 * 2;
  height: (@var + 5 ) * 2;
}

.div3 {
  width: 30px;
  height: 50px;
}

3.5 顏色函式

色輪，spin(param1,param2)函式
- 互補色，互補的顏色正好在色輪相反的位置
```
@colorBase:#3bafdA;
@colorComplement:spin(@colorBase,180);//得到#dc6939
```
- 三元色。我們可以進一步探討顏色模型並且建立一個三元色結構。“三元”，顧名思義，是由三種顏色組成。因此，我們將色輪分成三部分，並且用函式spin()來設定旋轉的度數：
```
@triadicSecondary:spin(@colorBase,-(360/3));//第二種顏色#b1d926
@triadicTertiary:spin(@colorBase, 360/3);//第三種顏色#db43b2
```
混合色，mix(param1,param2)，對兩個顏色進行混合
```
#div1{color:mix(red,yello)}//#ff800
```
明暗度，lighten(param1,param2)淺一點，darken(param1,param2)深一點
```
@ahover:lighten(@colorBase,10%);
@afocus:darken(@colorBase,10%);
```
飽和度，saturate(param1,param2)和desaturate(param1,param2)。飽和度定義了一種顏色的深度。飽和度越大，顏色越亮麗，最低飽和度則會使顏色趨於灰色。
```
@btnHover:saturate(@colorBase,10%);
@btnFocus:desaturate(@colorBase,10%);
@btnDisable:lightness(desaturate(@colorBase,100%),30%;
```
智慧色彩輸出。LESS讓我們的樣式變得更智慧。舉例來說，我們能讓我們的樣式自己“思考”並決定什麼顏色在什麼條件下適用。假設我們正在建立一個網站模板，這是按鈕的
基本樣式，你打算用不同的顏色和風格來擴充套件它。但是我們怎樣控制顏色的輸出呢？我們當然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文字保留對比，以便於閱讀，這樣，contrast()函式就派上用場了。
```
@bColor:#000;
div{
  background-color:@bColor;
  color:contrast(@bColor);//#ff
}
```

3.6 繼承

混合可以將一個定義好的class A輕鬆引入到另個class B裡面，從而簡單實現class B繼承class A中的所有屬性。還可以帶引數呼叫，和函式一樣。

有預設值,也可以不加預設值，或者是不加引數、多個引數都可行。

需要帶括號，如果是沒有變數的時候可不帶括號。

例如：

//less
.rounded-corners (@radius: 5px) {
  width:100px;
  height:30px;
  margin-bottom:10px;
  background-color: #ccc;
  color:#333;
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.div1{
  .rounded-corners();//.rounded-corners;
}
.div2{
  .rounded-corners(10px);
}

/* 生成的 CSS */
.div1 {
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  background-color: #ccc;
  color: #333;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.div2 {
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  background-color: #ccc;
  color: #333;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

3.7 匹配模式

匹配模式，即使同一個函式用不同的引數時呼叫不同的方法。例如寫一個三角：

.triangleBase{
  width:0;
  height:0;
  overflow:hidden;
}
.triangle(top,@w:5px,@c:#ccc){
  .triangleBase;
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  .triangleBase;
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.div1{
  .triangle(top);
}
.div2{
  .triangle(bottom);
}

另一種寫法，@_ 所有方法都呼叫：

.triangle(@_){
  width:0;
  height:0;
  overflow:hidden;
}
.triangle(top,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.div1{
  .triangle(top);
}
.div2{
  .triangle(bottom);
}

生成的css：

.div1 {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 5px;
  border-color: #cccccc transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.div2 {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 5px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
}

3.8 其他

@arguments變數包含所有傳遞進來的引數。

//@argumentts變數
.border(@w:30px,@c:red,@s:solid){
  border:@arguments;
}
.test_arguments{
  border();
}

避免編譯，有時候需要輸出一些不正確的css語法或者使用一些Less不認識的專有語法，在前面加入~ 。

.test{
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

.test{
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); 
}

!important關鍵字，會為所有混合所帶來的樣式，新增上!important

.test{
  .border()!important;
}

JavaScript 賦值，在樣式表中使用Javascript——相當精彩。你可以使用表示式，也可以參考環境方向來使用反單引號。

@string: ``hello`.toUpperCase()`; /* @string 變成 `HELLO` */ 
   
/* 你也可以使用前面提到的插值： */ 
@string: `HELLO`;  
@var: ~``@{string}`.topUpperCase()`; /* 變為 `HELLO` */ 
   
/* 獲取文件的資訊 */ 
@height = `document.body.clientHeight`;

@import，用@import匯入css或者less檔案，減少伺服器資源請求

less檔案可以省略字尾名，同時可以在檔案任意地方引入
css檔案需要加入字尾名

用@import時，Koala編譯會讓軟體崩潰，用node吧！

3.9 總結

註釋，可解析註釋和不可解析的註釋
變數用@定義，通過改變一個值改變多處樣式
巢狀，符合dom結構
運算，加減乘除四則運算規律
繼承，和js函式一樣
匹配模式，類似函式引數
@arguments 變數包含所有傳遞進來的引數、避免編譯~、!important為所有樣式加上!important
color函式：lighten(@color,10%)，darken(@color,10%)
匯入：@import：`style` less副檔名可選，@import:`style.css` 。減少伺服器資源請求
字串插入，字串也可以用於變數中，然後通過@{name} 來呼叫

@base_url : `http://www.t1.chei.com.cn/common`;  
background-image: url("@{base_url}/images/background.png");

4、Less和Sass的對比

相同點

兩者都是css預編譯
很多語法類似，思想一樣

不同點

Less環境以及使用方面比Sass簡單
條件語句與控制，less不支援。Sass可以使用if { } else { } 條件語句，以及for { }迴圈。它甚至支援 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
koala輸出格式，LESS：normal（正常）、compress（壓縮）。而Sass提供4中輸出選項：nested（正常縮排）、expanded（括號不單獨佔一行）、 compact（一個類一行顯示）和compressed （壓縮為一行）。
less基於純JavaScript，通過伺服器端來處理的；Sass是基於Ruby的，在伺服器端處理。

總結

如果你是Ruby或HAML的粉絲，那麼Sass會是你的好助手。對我來說，一個前端開發人員，我傾向於LESS，因為它便於引入和能夠使用JavaScript的表示式以及文件屬性。對於新手來說更簡單可用。

對於剛接觸的css預編譯的前端，我推薦用Less。

5、參考文件

原始碼，其中還有對應的PPT，想要看PPT的可以私信或留言給我，我發給大家。

【Less】Less基本用法總結
2020-12-30
less用法總結
2019-11-22
Css預編語言以及區別
2021-04-25
CSS
vscode的gulp-less自動把less編譯成css
2018-07-12
VSCode編譯CSS
關於最近學習的Less預編譯語言的筆記，歡迎大家一起探討~
2020-02-10
編譯筆記
CSS預編譯器
2022-05-01
CSS編譯
stylus（css預編譯器）
2018-05-27
CSS編譯
C語言-->（十四）結構體、巨集、編譯
2020-04-04
C語言結構體編譯
C語言的編譯連結執行過程
2018-10-31
C語言編譯
Sublime Text3中 less 自動編譯成 css 的方法
2018-03-27
編譯CSS
源語言、目標語言、翻譯器、編譯器、直譯器
2019-05-07
編譯
編譯型語言與解釋型語言
2018-08-24
編譯
編譯ROCKSDB總結
2018-11-13
編譯
C語言編譯和連結過程簡介
2018-05-27
C語言編譯
大話css預編譯處理（三）：基礎語法篇
2019-02-17
CSS編譯
css預編譯--sass基礎篇
2018-05-14
CSS編譯
C語言 - 條件編譯
2024-08-31
C語言編譯
解釋型語言、編譯型語言區別
2018-08-21
編譯
在React專案中安裝並使用Less（用法總結）
2019-03-17
React
Rust 交叉編譯與條件編譯總結
2018-11-22
Rust編譯
編譯語言、解釋語言與指令碼語言之間的區別
2018-12-24
編譯指令碼
Linux下C語言編譯的問題
2018-12-18
LinuxC語言編譯
c語言多檔案編譯
2018-05-15
C語言編譯
Go語言交叉編譯工具gox
2021-09-09
Go編譯
go語言編譯過程概述
2022-04-16
Go編譯
Python 既是解釋型語言，也是編譯型語言
2023-11-08
Python編譯
GCC編譯過程（預處理-＞編譯-＞彙編-＞連結）
2020-09-30
GC編譯
【開發語言】PHP、Java、C語言的編譯執行過程
2019-05-13
PHPJavaC語言編譯
PHP驗證碼的語言包&預警資訊通知總結
2023-04-20
PHP
Java 10更新彙總，新的編譯器通吃主流程式語言
2021-09-09
Java編譯
Python 語言特性：編譯+解釋、動態型別語言、動態語言
2021-04-26
Python編譯型別
編譯器後端總結
2024-07-10
編譯後端
計算機程式語言的分類，解釋型語言、編譯型語言、指令碼語言的關係
2018-11-07
計算機編譯指令碼
badamczewski/PowerUp：Rust/Go語言的反編譯工具
2021-11-25
RustGo編譯
幽默：Go語言的編譯器 - programmerjoke9
2021-01-17
Go編譯
使用 Sublime Text 3 編譯 C 語言
2019-12-24
編譯
3- C語言編譯過程
2020-12-23
C語言編譯
C語言編譯器手機版
2020-12-08
C語言編譯