Less (層疊樣式表) - 維基百科，自由的百科全書 - Wikipedia

受益於JavaScript，LESS可以在客戶端上執行（IE6+、Webkit、Firefox），也可以在伺服器端執行（Node.js、Rhino）。

在語法方面，LESS與CSS較為接近，一個合法的CSS代碼段 ... Less(層疊樣式表) 維基百科，自由的百科全書 跳至導覽 跳至搜尋 Less設計者AlexisSellier實作者AlexisSellier,DmitryFadeyev面市時間2009穩定版本3.13.0 （2020年9月29日，​20個月前​（2020-09-29） ） 型態系統動態型別作業系統跨平台授權條款Apache授權條款2副檔名.less網站lesscss.org啟發語言CSS,Sass影響語言Sass,LessFramework 層疊樣式表 CSS動畫 IE盒模型缺陷 CSSfilter 無表格網頁設計 回應式網頁設計 維基教科書 本模板：檢視討論編輯 Less（或寫作LESS）是一種由AlexisSellier設計的動態層疊樣式表語言，受Sass所影響，同時也影響了Sass的新語法：SCSS。

[1] LESS是開源的，其第一個版本由Ruby寫成，但在後續的版本當中，Ruby逐漸被替換為JavaScript。

受益於JavaScript，LESS可以在客戶端上執行（IE6+、Webkit、Firefox），也可以在伺服器端執行（Node.js、Rhino）。

[2] 在語法方面，LESS與CSS較為接近，一個合法的CSS代碼段本身也是一段合法的LESS代碼段。

LESS提供變數、巢狀、混合、運算子、函式等一般編程所需的抽象機制。

[2] 目次 1變量 2混合 3嵌套 4函數與操作符 5相較於Sass 6相較於ZUSS 7應用於網站 8參考文獻 9外部連結 變數[編輯] LESS支援自訂變數。

在LESS中，變數以「@」開頭，賦值時以「:」進行賦值。

經過LESS的翻譯，這些變數最終會轉換為符合CSS標準的值。

[2] @color:#4D926F; #header{ color:@color; } h2{ color:@color; } 上面的代碼最終會轉化為下面的代碼： #header{ color:#4D926F; } h2{ color:#4D926F; } 混合[編輯] 混合允許開發者僅僅通過包含類名將一個類當中的所有屬性全部應用於另一個類，同時也可以像函式一樣提供參數使用。

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

[2] .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提供了代碼的巢狀。

[2] #header{ h1{ font-size:26px; font-weight:bold; } p{font-size:12px; a{text-decoration:none; &:hover{border-width:1px} } } } 將產生： #headerh1{ font-size:26px; font-weight:bold; } #headerp{ font-size:12px; } #headerpa{ text-decoration:none; } #headerpa: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[3]，但Sass被設計為簡化、擴充CSS，因此諸如大括號等語法都被移除，但流程控制、繼承等概念被引入其中；相反，LESS被設計為更接近於CSS，其語法與CSS本身非常接近，因此一段合法的CSS代碼也是一段合法的LESS代碼。

[4]不過新版本的Sass同樣將CSS式語法引入了其中，命名為SCSS（SassyCSS）。

[1] 更多兩者異同可見：https://gist.github.com/674726（英文）（頁面存檔備份，存於網際網路檔案館） 相較於ZUSS[編輯] ZUSS受啟發於LESS，但其目的是與Java進行結合，因此混合當中不允許使用JavaScript函式，取而代之的是Java函式。

應用於網站[編輯] LESS由於以JavaScript實現，因此既可以在瀏覽器上進行即時翻譯，也可以首先在伺服器上翻譯為CSS之後再傳送給瀏覽器。

參考文獻[編輯] ^1.01.1SassandLess（頁面存檔備份，存於網際網路檔案館）SassandLess ^2.02.12.22.32.4OfficialLESSwebsite（頁面存檔備份，存於網際網路檔案館）OfficialLESSwebsite ^AboutLESS（頁面存檔備份，存於網際網路檔案館）About ^What'sWrongWithCSS（頁面存檔備份，存於網際網路檔案館）What'sWrongWithCSS 外部連結[編輯] 官方網站 LESS原始碼（GitHub）（頁面存檔備份，存於網際網路檔案館） 閱論編樣式表語言（英語：Stylesheetlanguage）模型 桌面出版（英語：Stylesheet(desktoppublishing)） 網頁開發 使用者介面（英語：userinterfacestylesheetlanguage） 標準 CSS DSSSL（英語：DocumentStyleSemanticsandSpecificationLanguage） XSL 非標準 JavaScript(JSSS)（英語：JavaScriptStyleSheets） FOSI（英語：FormattingOutputSpecificationInstance） Qt Sass Less Stylus（英語：Stylus(stylesheetlanguage)） SMILTimesheets（英語：SMILTimesheets） PostCSS（英語：PostCSS） 列表 比較（英語：Comparisonofstylesheetlanguages） 取自「https://zh.wikipedia.org/w/index.php?title=Less_(层叠样式表)&oldid=64166540」 分類：​層疊樣式表網頁設計 導覽選單 個人工具 沒有登入討論貢獻建立帳號登入 命名空間 條目討論 臺灣正體 不转换简体繁體大陆简体香港繁體澳門繁體大马简体新加坡简体臺灣正體 查看 閱讀編輯檢視歷史 更多 搜尋 導航 首頁分類索引特色內容新聞動態近期變更隨機條目資助維基百科 說明 說明維基社群方針與指引互助客棧知識問答字詞轉換IRC即時聊天聯絡我們關於維基百科 工具 連結至此的頁面相關變更上傳檔案特殊頁面靜態連結頁面資訊引用此頁面維基數據項目 列印/匯出 下載為PDF可列印版 其他語言 العربيةБългарскиDeutschΕλληνικάEnglishEspañolEestiفارسیFrançaisՀայերենItaliano日本語한국어മലയാളംPolskiPortuguêsРусскийСрпски/srpskiTürkçeУкраїнська 編輯連結