Less (層疊樣式表)

Less（或寫作LESS）是一種由Alexis Sellier設計的動態層疊樣式表語言，受Sass所影響，同時也影響了Sass的新語法：SCSS。

Less

設計者	Alexis Sellier
實作者	Alexis Sellier, Dmitry Fadeyev
面市時間	2009
當前版本	4.2.1（2024年12月8日；穩定版本）
型態系統	動態類型
操作系統	跨平台
許可證	Apache許可證 2
文件擴展名	.less
網站	lesscss.org
啟發語言
CSS, Sass
影響語言
Sass, Less Framework

層疊樣式表

• CSS動畫
• IE盒模型缺陷
• CSS filter
• 無表格網頁設計
• 響應式網頁設計
• 維基教科書

LESS是開源的，其第一個版本由Ruby寫成，但在後續的版本當中，Ruby逐漸被替換為JavaScript。受益於JavaScript，LESS可以在客戶端上運行（IE6+、Webkit、Firefox），也可以在服務端運行（Node.js、Rhino）。

在語法方面，LESS與CSS較為接近，一個合法的CSS代碼段本身也是一段合法的LESS代碼段。LESS提供變量、嵌套、混合、操作符、函數等一般編程所需的抽象機制。

變量

LESS支持自定義變量。在LESS中，變量以「@」開頭，賦值時以「:」進行賦值。經過LESS的翻譯，這些變量最終會轉換為符合CSS標準的值。

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

上面的代碼最終會轉化為下面的代碼：

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

混合

混合允許開發者僅僅通過包含類名將一個類當中的所有屬性全部應用於另一個類，同時也可以像函數一樣提供參數使用。

CSS3並不支持混合，任何重複的代碼必須在每個使用的地方重複編寫，而通過LESS，你可以將代碼進行復用。

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

上面的代碼將產生下面的代碼：

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

嵌套

CSS支持邏輯上的嵌套，但在代碼本身並不是嵌套的。LESS提供了代碼的嵌套。

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

將產生：

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

函數與操作符

LESS提供了函數用以支持複雜的屬性間關係，其函數與JavaScript代碼中的函數一一對應，允許JavaScript代碼直接操縱傳達過去的值。同時，LESS內置了基本的操作符，涵蓋了基本加、減、乘、除，能夠對屬性值或顏色進行計算。

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

將產生：

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

相較於Sass

Sass與LESS都屬於CSS的預處理器，都允許通過一定的抽象手段將開發者的意圖轉化為CSS代碼。

LESS受啟發於Sass，但Sass被設計為簡化、擴展CSS，因此諸如大括號等語法都被移除，但流程控制、繼承等概念被引入其中；相反，LESS被設計為更接近於CSS，其語法與CSS本身非常接近，因此一段合法的CSS代碼也是一段合法的LESS代碼。不過新版本的Sass同樣將CSS式語法引入了其中，命名為SCSS（Sassy CSS）。

更多兩者異同可見：https://gist.github.com/674726（英文） （頁面存檔備份，存於網際網路檔案館）

相較於ZUSS

ZUSS受啟發於LESS，但其目的是與Java進行結合，因此混合當中不允許使用JavaScript函數，取而代之的是Java函數。

應用於網站

LESS由於以JavaScript實現，因此既可以在瀏覽器上進行實時翻譯，也可以首先在服務器上翻譯為CSS之後再傳送給瀏覽器。

外部連結

• 官方網站
• LESS源碼（GitHub） （頁面存檔備份，存於網際網路檔案館）