前言

.less 文件是一種層疊樣式表（CSS）預處理器語言的文件格式，簡稱 LESS（Leaner Style Sheets）。它擴展了 CSS 語言，增加了變量、混合、函數和許多其他技術，使得 CSS 更加易于維護和擴展。

與CSS相比較

CSS 是網頁設計中用來控制頁面元素樣式的標準語言，但它本身的功能比較基礎。LESS 提供了更高級的編程特性，允許開發者編寫更加動態和可復用的樣式代碼。使用 LESS可以創建更加結構化和簡潔的 CSS，提高開發效率和頁面的維護性。

需要注意

LESS 文件在瀏覽器中不能直接使用，它需要被編譯成標準的 CSS 文件才能在網頁中生效。這個編譯過程可以通過 LESS 的官方編譯器或者通過構建工具（如 Webpack、Gulp）中的插件來完成。

Code例子

定義一個通用的按鈕樣式，然后基于此樣式定義不同樣式，通過LESS的變量和Mixins即可實現

// 定義變量
@btn-font-size: 14px;
@btn-padding: 10px 20px;
@primary-color: #4CAF50;
@secondary-color: #008CBA;// 定義混合
.button-style(@color) {color: white;background-color: @color;padding: @btn-padding;font-size: @btn-font-size;border: none;cursor: pointer;
}// 使用混合給特定按鈕應用樣式
.primary-button {.button-style(@primary-color);
}.secondary-button {.button-style(@secondary-color);
}

?學習資源

Less 快速入門 | Less.js 中文文檔 - Less 中文網 (bootcss.com)