使用 Less 的架構

編輯「frameworks-using-less」的標記原始碼

UI/主題架構和元件

Ant Design 企業級 UI 設計語言和基於 React 的實作。
Balloon.css 使用純 CSS 製作的簡單工具提示
Bootflat 基於 Bootstrap 的開源平面 UI 套件
BootPress 內建部落格和平面檔案 CMS 的 PHP 架構
Bootstrap 用於在網路上開發回應式、行動裝置優先專案的前端架構
Bootswatch Bootstrap 的免費主題集合
Cardinal 適用於建立回應式網頁應用程式的前端開發人員的小型「行動裝置優先」CSS 架構
Flat UI Free Bootstrap 的主題和架構
Fomantic-UI Semantic-UI 的官方社群分支
Ink 快速開發網頁介面的工具組
Metro UI CSS 建立具有類似 Windows 8 介面的網站的樣式組
Petal 在 Shakr 開發的現代、輕量級 CSS UI 架構
Pre CSS 架構
prelude 輕量級、回應式且可擴充的前端架構
React Suite 🧱 React 元件組
Schema 輕量級、回應式且精簡的前端 UI 架構
Semantic UI 基於自然語言中實用原則的 UI 元件架構
Strapless HTML 元素的 CSS 樣板/架構,用於模式和顏色的混入程式庫
UIkit 用於開發網頁介面的輕量級且模組化的前端架構
ngBoilerplate AngularJS 專案的意見領袖 kickstarter
Wee 用於邏輯建構複雜、回應式網頁專案的輕量級前端架構

格線系統

彈性格線系統
adaptGrid
Fluidable
Golden Grid System
Less Zen Grid
Order.less
responsibly
Responsive Boilerplate
Semantic.gs

Mixin 函式庫

3L Mixin 函式庫
animate CSS3 關鍵影格動畫函式庫
Clearless Mixin 集合
Css3LessPlease 將 css3please.com 轉換為 Less mixin
CssEffects CSS 風格效果集合
Cssowl Mixin 函式庫
cube.less 僅使用 CSS 的動畫 3D 立方體
est Mixin 函式庫
六角形 產生自訂大小和顏色的 CSS 六角形
homeless Mixin 函式庫
LESS 元素 Mixin 組合
LESS Hat Mixin 函式庫
lessley 使用純 Less 編寫的類似 jasmine 的測試套件
Lessmore Mixin 函式庫。跨瀏覽器支援 CSS3 功能等
LESS-bidi 建立雙向樣式的 Mixin 組合
LESS-Mix Mixin 函式庫
media-query-to-type 使用 Less 將媒體查詢轉換為媒體類型
More-Colors.less 在瀏覽器中設計時,變數可讓您更輕鬆地操作顏色
more-less 支持 Less 1.7 的 Mixin 函式庫
More.less Mixin、動畫、形狀等
more-or-less for 迴圈和其他函式 + css3 mixin
normalize.less 使用 Less 模組化著名的 normalize.css
Oban Mixin 集合
Preboot 變數和 mixin 的集合。Bootstrap 的前身
prelude-mixins Mixin 集合
Shape.LESS 各種形狀的 mixin 集合
tRRtoolbelt.less 常見動作的 mixin 和函式
Tuesday.less CSS 動畫 mixin 函式庫
Less 樣式函式庫 變數和 LESS 名稱空間 mixin 的集合

編輯器和編輯器外掛程式

編輯「editors-and-plugins」的 markdown 原始碼

另請參閱:Less 的 GUI

編輯器和 IDE

Sublime Text 2 和 3

Eclipse

Komodo Edit/IDE

Visual Studio

Dreamweaver

Notepad++ 6.x

瀏覽器擴充功能


Less.js 外掛程式

編輯「外掛程式」的 markdown 原始碼

可用的 Less 外掛程式。在 GitHubNPM 登錄中尋找更多。

後處理器/功能外掛程式

Autoprefixer 加入廠商前綴
CSScomb 美化/格式化
clean-css 壓縮/縮小
CSSWring 壓縮/縮小
css-flip 產生由左至右 (LTR) 或由右至左 (RTL) 的 CSS
functions 在 Less 中用 Less 本身撰寫自訂 Less 函式
group-css-media-queries 群組 CSS 媒體查詢
inline-urls url() 轉換為呼叫 data-uri()
lesshint 檢查您的 Less
lists 清單/陣列操作(包括迴圈)
pleeease 使用 pleeease 進行後製處理
rtl 從 ltr 反向至 rtl
variables-output 將頂層變數匯出至 JSON 檔案

預處理器

sass2less 匯入並將 Sass/SCSS 檔案轉換為您的 Less 程式碼(包括變數、混合等)

匯入外掛程式

bower-resolve 從 Bower 套件匯入
glob Less 匯入中的 Glob 支援
npm-import 從 npm 套件匯入
resolve-blocks 向上尋找指定元件

函式函式庫

advanced-color-functions 尋找更多對比顏色的函式
cubehelix 一個 cubehelix 函式
lists 清單/陣列操作函式
urlencode URL 編碼函式
util 一組實用函式

架構匯入器

Bootstrap Bootstrap
Cardinal Cardinal
Flexbox Grid Flexbox Grid
彈性格線系統 彈性格線系統
Ionic Ionic
Lesshat Lesshat
Skeleton Skeleton

Less 的 GUI

編輯「guis-for-less」的標記原始碼

提示:試試看平台上可用的不同 Less 工具,看看哪一個最符合你的需求。

此頁面重點介紹 GUI 編譯器。如需命令列用法和工具,請參閱 命令列用法

跨平台

Crunch 2!

給優秀人士的編輯器和編譯器。

Crunch 2 是一個跨平台(Windows、Mac 和 Linux)編輯器,內建編譯功能。如果你處理大型 Less 專案,你絕對應該試試看,因為你只要使用免費版本就能處理 Less 檔案。可於下列網址取得:https://getcrunch.co/

Crunch screenshot

Koala

Koala 是一個跨平台 GUI 應用程式,用於編譯 less、sass 和 coffeescript。

特色:跨平台、支援編譯錯誤通知和編譯選項。

取得更多資訊:http://koala-app.com/

koala screenshot

Prepros

Prepros 是一個用於編譯 Less、Sass、Compass、Stylus、Jade 等的工具。

https://prepros.io/ 取得更多資訊

Prepros screenshot

特定平台

Windows

WinLess

WinLess 最初是 Less.app 的複製,它採用更完整的特色方法,並有數個設定。它也支援以命令列引數啟動。

取得更多資訊:http://winless.org

WinLess screenshot

OS X

CodeKit

CodeKit 是 LESS.app 的後繼版本,除了 Less 之外,還支援許多其他預處理語言,例如 SASS、Jade、Markdown 等。

取得更多資訊:http://incident57.com/codekit

CodeKit screenshot

LiveReload

CSS 編輯和圖片變更會立即套用。CoffeeScript、SASS、Less 等語言也可以直接使用。

取得更多資訊:http://livereload.com

LiveReload screenshot

Linux

Plessc

Plessc 是使用 PyQT 製作的 GUI 前端。

自動編譯、記錄檢視器、使用指定的編輯器開啟 less 檔案、編譯檔案設定。取得更多資訊:https://github.com/Mte90/Plessc

Plessc screenshot


線上 Less 編譯器

編輯「online-less-compilers」的 markdown 原始碼
less2css.org 在瀏覽器中託管的線上整合開發環境 (IDE),允許使用者即時編輯和編譯 Less 到 CSS。
winless.org/online-less-compiler 這個線上 Less 編譯器可以幫助您學習 Less。您可以瀏覽以下範例或嘗試您自己的 Less 程式碼。
lesstester.com Less CSS 的線上編譯器。
leafo.net/lessphp/editor lessphp 現場示範。
estFiddle Less 的線上編譯器,提供 Less 和 est 的現場示範。允許使用者在 1.4.0 之後的所有 Less 版本之間切換,並提供 est/Autoprefixer 功能。
BeautifyTools Less 編譯器 BeautifyTools 中提供格式化和壓縮功能的線上 Less 編譯器
Less WebCompiler 網路上最具可設定性的 Less 網路編譯器,它允許您使用自己的程式碼標準來呈現 CSS 輸出!

支援 Less 的線上網路 IDE/遊樂場

CSSDeck Labs CSSDeck Labs 是您可以快速建立一些包含 HTML、CSS、JS 程式碼的實驗(或測試案例)的地方。
CodePen CodePen 是網路前端的遊樂場。
Fiddle Salad 一個線上遊樂場,提供即時可用的編碼環境。
JS Bin JS Bin 是一個專門設計來幫助 JavaScript 和 CSS 人員測試程式碼片段的 Webapp。
jsFiddle 線上 Web 編輯器

第三方編譯器

編輯「第三方編譯器」的標記原始碼

Node.js 工具

其他技術

Wro4j Runner CLI 下載 wro4j-runner.jar 檔案並執行下列指令

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

更多詳細資訊可在此處找到:Wro4j Runner CLI

CSS::LESSp

http://search.cpan.org/~drinchev/CSS-LESSp/

lessp.pl styles.less > styles.css

Windows Script Host

注意 - 官方的 Less 節點在 Windows 上執行,所以我們不確定為何您要使用這個。

Less.js for Windows 搭配此用法

cscript //nologo lessc.wsf input.less [output.css] [-compress]

lessc input.less [output.css] [-compress]

dotless

dotless for Windows 可以像這樣執行

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

另請參閱


Less.js 的移植

編輯「ports」的標記原始碼

Java

  • Lesscss(使用 Rhino、Nasshorn 或 node.js 引擎執行 less.js;相容於 1.7.0)
  • Lesscss gradle 外掛程式(基於 Lesscss 的 Gradle 外掛程式)
  • Less 引擎(在基於 Rhino JVM 的 JavaScript 解譯器中執行 less.js)
  • Java 用 Less CSS 編譯器(在基於 Rhino JVM 的 JavaScript 解譯器中執行 less.js)
  • Less4j(原生 Java 實作。)
  • JLessC(完全以 Java 編寫的 Less 編譯器)

.Net

PHP

Python

Ruby

Go

知道其他應該新增到此清單的移植嗎?請 讓我們知道