Lessを使用するフレームワーク

"frameworks-using-less"のMarkdownソースを編集する

UI/テーマフレームワークとコンポーネント

Ant Design エンタープライズクラスのUIデザイン言語とReactベースの実装。
Balloon.css 純粋なCSSで作られたシンプルなツールチップ
Bootflat BootstrapベースのオープンソースのフラットUI KIT
BootPress ブログとフラットファイルCMSを内蔵したPHPフレームワーク
Bootstrap レスポンシブでモバイルファーストなWebプロジェクトを開発するためのフロントエンドフレームワーク
Bootswatch Bootstrapの無料テーマコレクション
Cardinal レスポンシブWebアプリケーションを構築するフロントエンド開発者向けの、小規模な「モバイルファースト」CSSフレームワーク
Flat UI Free Bootstrapのテーマとフレームワーク
Fomantic-UI Semantic-UIの公式コミュニティフォーク
Ink Webインターフェースの迅速な開発のためのツールセット
Metro UI CSS Windows 8に似たインターフェースを持つサイトを作成するためのスタイルセット
Petal Shakrで開発された、最新の軽量CSS UIフレームワーク
Pre CSSフレームワーク
prelude 軽量でレスポンシブ、拡張可能なフロントエンドフレームワーク
React Suite 🧱 Reactコンポーネントのスイート
Schema 軽量でレスポンシブ、無駄のないフロントエンドUIフレームワーク
Semantic UI 自然言語の有用な原則に基づいたUIコンポーネントフレームワーク
Strapless HTML要素のCSSボイラープレート/フレームワーク、パターンと色のMixinライブラリ
UIkit Webインターフェースを開発するための軽量でモジュール式のフロントエンドフレームワーク
ngBoilerplate AngularJSプロジェクトのための意見の分かれたキックスターター
Wee 複雑でレスポンシブなWebプロジェクトを論理的に構築するための軽量フロントエンドフレームワーク

グリッドシステム

フレキシブルグリッドシステム
adaptGrid
Fluidable
ゴールデングリッドシステム
Less Zen Grid
Order.less
responsibly
レスポンシブボイラープレート
Semantic.gs

Mixinライブラリ

3L Mixinライブラリ
animate CSS3キーフレームアニメーションのライブラリ
Clearless Mixinのコレクション
Css3LessPlease css3please.comのLess mixinへの変換
CssEffects CSSスタイルエフェクトのコレクション
Cssowl Mixinライブラリ
cube.less CSSのみを使用したアニメーション3Dキューブ
est Mixinライブラリ
Hexagon カスタムサイズと色のCSS六角形を生成
homeless Mixinライブラリ
LESS Elements 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プラグイン

"plugins"のMarkdownソースを編集する

利用可能なLessプラグイン。 詳細は、GitHubおよびNPMレジストリをご覧ください。

ポストプロセッサ/機能プラグイン

Autoprefixer ベンダープレフィックスを追加する
CSScomb 美しくする/フォーマットする
clean-css 圧縮/縮小する
CSSWring 圧縮/縮小する
css-flip 左から右(LTR)または右から左(RTL)のCSSを生成する
functions Less自体でカスタムLess関数を記述する
group-css-media-queries CSSメディアクエリをグループ化する
inline-urls url()data-uri()の呼び出しに変換する
lesshint LessのLintを実行する
lists リスト/配列操作(ループを含む)
pleeease pleeease を使用した後処理
rtl ltr から rtl へ反転
variables-output トップレベル変数を JSON ファイルにエクスポート

プリプロセッサ

sass2less Sass/SCSS ファイルを Less コードにインポートして変換(変数、mixin などを含む)

インポートプラグイン

bower-resolve Bower パッケージからインポート
glob Less インポートでのグロビングサポート
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" の Markdown ソースを編集する

ヒント:プラットフォームで利用可能なさまざまな Less ツールを試して、ニーズに合うものを見つけてください。

このページでは GUI コンパイラに焦点を当てています。コマンドラインの使い方とツールについては、コマンドラインの使い方 を参照してください。

クロスプラットフォーム

Crunch 2!

素晴らしい人々のためのエディターとコンパイラ。

Crunch 2 は、コンパイル機能が統合されたクロスプラットフォーム(Windows、Mac、Linux)エディターです。大規模な Less プロジェクトで作業する場合は、Less ファイルには無料版のみが必要なので、ぜひ試してみてください。入手先:https://getcrunch.co/

Crunch screenshot

Koala

Koala は、less、sass、coffeescript をコンパイルするためのクロスプラットフォーム GUI アプリケーションです。

機能:クロスプラットフォーム、コンパイルエラー通知サポート、コンパイルオプションサポート。

詳細はこちら: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 の後 successor で、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 と est のライブデモを提供するオンライン Less コンパイラ。ユーザーは、オプションの est/Autoprefixer 機能を使用して、1.4.0 以降のすべてのバージョンの Less を切り替えることができます。
BeautifyTools Less Compiler BeautifyTools でオプションのフォーマットと最小化を備えたオンライン Less コンパイラ
Less WebCompiler インターネット上で最も設定可能な Less ウェブコンパイラで、独自のコーディング標準で CSS 出力を作成できます。

Less をサポートするオンライン Web IDE/プレイグラウンド

CSSDeck Labs CSSDeck Labs は、HTML、CSS、JS コードを含む実験(またはテストケース)をすばやく作成できる場所です。
CodePen CodePen は、Web のフロントエンド側のプレイグラウンドです。
Fiddle Salad すぐに使えるコーディング環境を備えたオンラインプレイグラウンド。
JS Bin JS Bin は、JavaScript と CSS のユーザーがコードスニペットをテストするのを支援するために特別に設計されたウェブアプリです。
jsFiddle オンライン Web エディター

サードパーティコンパイラ

"third-party-compilers" の Markdown ソースを編集する

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 で動作するため、これを使用する理由がわかりません。

Windows 用 Less.js をこの使用方法で使用します

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

または

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

dotless

Windows 用 dotless は次のように実行できます

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

こちらもご覧ください


Less.js のポート

"ports" の Markdown ソースを編集する

Java

  • Lesscss (Rhino、Nasshorn、または node.js エンジンを使用して less.js を実行します。1.7.0 準拠)
  • Lesscss gradle plugin (Lesscss に基づく Gradle プラグイン)
  • Less Engine (Rhino JVM ベースの JavaScript インタプリタで less.js を実行します)
  • Java 用 Less CSS コンパイラ (Rhino JVM ベースの JavaScript インタプリタで less.js を実行します)
  • Less4j (ネイティブ Java 実装)
  • JLessC (完全に Java で記述された Less コンパイラ)

.Net

PHP

Python

Ruby

Go

  • Go での Less.js (埋め込み Javascript エンジン内で less.js を実行します)

このリストに追加する必要がある別のポートをご存知ですか?お知らせください