Awesome Less
Lessを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
- 概要
- 開始方法
- UI・テーマフレームワークとコンポーネント
- ライブラリと Mixins
- スタイルガイド
- Less の移植版
- GUI、エディター、プラグイン
- オンライン Less コンパイラー
- Less をサポートするオンライン Web IDE・プレイグラウンド
- 翻訳
- 記事
- 書籍
- 動画
- 実験
- コミュニティ
- 貢献方法
- ライセンス
概要
Less は Cascading Style Sheets (CSS) にコンパイルでき、クライアント側またはサーバー側で実行できるオープンソースの動的スタイルシート言語です。Alexis Sellier により設計された Less は Sass の影響を受け、CSS 風のブロック書式構文を採用した Sass の新しい「SCSS」構文にも影響を与えました。Less は変数、ネスト、mixins、演算子、関数を提供します。ほかの CSS プリコンパイラーとの主な違いは、ブラウザーが Less を介してリアルタイムにコンパイルできることです。出典: Wikipedia
開始方法
UI・テーマフレームワークとコンポーネント
- 1pxdeep - 相対的な視覚的重み、またはカラースキームに基づくデザインを Bootstrap にもたらします。
- Ant Design - エンタープライズ級 UI デザイン言語および React ベースの実装。
- Bootstrap a11y theme - Bootstrap 開発者のウェブアクセシビリティ対応を容易にします。
- Bootstrap 3 - レスポンシブでモバイルファーストなウェブプロジェクト開発向け、最も人気のある HTML、CSS、JS フレームワーク。
- Bootswatch - Bootstrap 向け無料テーマのコレクション。
- Cardinal - レスポンシブウェブアプリケーションを構築するフロントエンド開発者向けの小さな「モバイルファースト」CSS フレームワーク。
- CSSHórus - レスポンシブ・モバイルウェブサイト開発用ライブラリ。
- Flat UI Free - Bootstrap 向けテーマ・フレームワーク。
- JBST - スタンドアロンのウェブサイトビルダー、または WordPress テーマ作成に使えるテーマフレームワーク。
- Less Rails - Rails 向け Less。
- Material Design for Bootstrap - Bootstrap V3 互換テーマ。Bootstrap 3 ベースのアプリケーションで Google の新しい Material Design ガイドラインを使う簡単な方法です。
- Metro UI CSS - Windows 8 に似たインターフェースのサイトを作るスタイルセット。
- Schema - 軽量でレスポンシブ、無駄のないフロントエンド UI フレームワーク。
- Semantic UI - 自然言語から得られる有用な原則に基づく UI コンポーネントフレームワーク。
- UIkit - ウェブインターフェース開発向け軽量・モジュラーなフロントエンドフレームワーク。
- Wee - 複雑でレスポンシブなウェブプロジェクトを論理的に構築する軽量フロントエンドフレームワーク。
ライブラリと Mixins
グリッド
- Bootstrap Grid Only - 余分なものを含まない Bootstrap のレスポンシブグリッド・レスポンシブユーティリティクラスのみ。軽量ながら強力で、好みに合わせてスタイルを適用できます。
- Framework - Less Framework は、適応型ウェブサイトを設計する CSS グリッドシステム。単一グリッドに基づく 4 種のレイアウトと 3 組のタイポグラフィプリセットを含みます。
- Flexible Grid System - これまでにない柔軟な方法でウェブアプリケーションを作成できるフレームワーク。
- Fluidable - モバイルファーストのレスポンシブグリッドシステム。スタンドアロンで軽量、Less で構築されています。
- Grid System - とても使いやすく、マークアップ非依存のグリッドシステム。
- Less Zen Grid - Less による Zen Grids の実装。
- Order.Less - ベースライン配置、列グリッド、モジュラースケール。
メディアクエリ
- CSS とメディアクエリ戦略 - Less CSS を使い、モダン・レガシーブラウザー向けのメディアクエリ駆動ソリューションを開発。
- メディアクエリライブラリ - Less による本当にシンプルなメディアクエリ。
- Media Query to Type - メディアクエリの内容を Internet Explorer 8 以下でアクセス可能にする IE 固有スタイルシート作成方法。
色
- Brand Colors - Sass、Less、Stylus、CSS で利用できる人気ブランドカラー 1,100 以上のコレクション。
- More-Colors - ブラウザー上でデザインする際の色操作を容易にする変数。
- Open Color - UI デザイン向けカラースキーム。CSS、SCSS、Less、Stylus、Adobe ライブラリ、Photoshop/Illustrator スウォッチ、Sketch パレットで利用できます。
アニメーション
- Animate - Less を用いて作成された CSS3 キーフレームアニメーションライブラリ。
- Animate Less - Dan Eden の Animate.css を Less へ移植。
- Cube Less - CSS（Less）のみを使う 3D（アニメーション）キューブ。元は LeanCloud（別名 AVOS Cloud）で使われました。
- Hover - リンク、ボタン、ロゴ、SVG、注目画像などへ適用できる CSS3 駆動ホバーアニメーション効果のコレクション。
- Less Burguer - Sass Burger を Less へ移植。
その他
- 3L - Mixins ライブラリ。
- Bidi - 双方向スタイルを作る Mixins セット。
- Clearless - Mixins のコレクション。
- Css3LessPlease - css3please.com を Less Mixins へ変換。
- CssEffects - CSS スタイル効果のコレクション。
- Cssowl - Mixin ライブラリ。
- Dynamic Stylesheet - 便利な Mixins セット。
- Est - Mixin ライブラリ。
- Hexagon - カスタムサイズ・色の CSS 六角形を生成。
- Homeless - 役立つ関数群。
- Less Elements - 基本 Mixins セット。
- Lesshat - スマートな Mixins ライブラリ。
- Lessley - 純粋な Less で書かれた Jasmine 風テストスイート。
- Lessmore - Mixins ライブラリ。CSS3 機能などのクロスブラウザーサポート。
- Normalize - 有名な normalize.css を Less でモジュール化。
- Oban - Mixins のコレクション。
- Preboot - より良い CSS を書くための Mixins・変数コレクション。
- Retina.js - 高解像度画像バリアントをレンダリングする JavaScript、SCSS、Sass、Less、Stylus ヘルパー。
- Shape - さまざまな形状向け Mixins のコレクション。
- TRRtoolbelt - 一般的な操作のための Mixins・関数。
スタイルガイド
- Handshake Style Guide - ベストプラクティスとコーディング規約のコレクションを紹介するガイド。
- WebMD Health Services Style Guide - WebMD Health Services における CSS/Less のベストプラクティスを概説する文書。
Less の移植版
Java
- JLessC - 完全に Java で書かれた Less コンパイラー。
- Less Engine - Rhino JVM ベース JavaScript インタープリターで Less を実行。
- Less CSS Compiler for Java - Rhino JVM ベース JavaScript インタープリターで Less を実行。
- Less4j - ネイティブ Java 実装。
- Lesscss - Rhino、Nasshorn、node.js エンジンを使って Less を実行。1.7.0 準拠。
- Lesscss Gradle Plugin - Less ベース Gradle プラグイン。
.Net
- BundleTransformer.Less - .NET で書かれたコンパイラー。
- Less CSS for .Net - .NET で書かれたコンパイラー。
PHP
Python
- Pyhton Compiler - Python で書かれたコンパイラー。
Ruby
- Ruby Compiler - Ruby の V8 Engine 上で動作する Less。
Go
- Go Compiler - 組み込み JavaScript エンジン内で Less を実行。
GUI、エディター、プラグイン
- Atom Linter - Atom テキストエディター用 Linter プラグイン。
- CSS 2 Convert - コピー・ペーストだけで CSS を Less へ自動変換する手軽な方法。
- CSS Less(ish) - CSS プリプロセッサー（Less など）の機能を簡略化して実装する Sublime Text 2・3 プラグイン。
- Crunch 2! - 統合コンパイル機能を備えるクロスプラットフォーム（Windows、Mac、Linux）エディター。大規模な Less プロジェクトで作業する場合は、Less ファイルには無料版だけで十分なのでぜひ試してください。
- Diamond - Sass、Less、CSS 向けに構築された依存関係管理。
- Eclipse Less Plugin - Less スタイルシートを編集・コンパイルする便利な機能を提供して Eclipse IDE を拡張するプラグイン。
- Eclipse Transpiler Plugin - ファイル（Less、SASS、CoffeeScript など）を自動トランスパイルする Eclipse プラグイン。
- Emacs - 保存時コンパイルをサポートする Emacs モード。
- Grunt Contrib - Grunt を使って Less ファイルを CSS へコンパイル。
- Grunt Lint - Grunt から CSS Lint を使い Less ファイルを Lint。
- Gulp Less - Gulp 向けプラグイン。
- Hayaky - 迅速なフロントエンドウェブ開発を目指す便利なスクリプト集。
- Hyra Helper - PHP のみを使って Less ファイルを CSS へ変換する CakePHP プラグイン。
- Koala - Less、Sass、CoffeeScript をコンパイルするクロスプラットフォーム GUI アプリケーション。
- Less for Notepad++ - Notepad++ 向け構文ハイライト。
- Less Sublime - Sublime Text 向け構文ハイライト。
- Lesshint - クリーンで一貫した Less を書くのを支援するツール。
- LiveReload - CSS 編集・画像変更をライブ反映。CoffeeScript、SASS、Less などがそのまま動作します。
- SimpleLess - 最小限の Less コンパイラー。ドラッグ、ドロップ、コンパイルするだけです。
- Sublime Less2CSS - 保存時に Less ファイルを CSS へコンパイルする Sublime Text 2 プラグイン。
- SublimeOnSaveBuild - Sublime Text 2 でファイルを保存した瞬間にビルドを実行。Less、Compass、その他のプリプロセッサー・makefile を使うウェブプロジェクトに最適です。
- Vim Less - 構文ハイライト、インデント、自動補完を追加する Vim バンドル。
- Visual Studio Web Essentials - CSS、HTML、JavaScript、TypeScript、CoffeeScript、Less を書くなら、開発者としての作業を容易にする多くの便利機能を見つけられます。
- Winless - WinLess は Less.app のクローンとして始まり、より機能が充実したアプローチと複数の設定を備えます。コマンドライン引数による開始もサポートします。
オンライン Less コンパイラー
- BeautifyTools Less Compiler - BeautifyTools にある、任意の整形・圧縮機能付きオンライン Less コンパイラー。
- EstFiddle - Less・est のライブデモを提供するオンライン Less コンパイラー。任意の est/Autoprefixer 機能を使い、1.4.0 以降のすべての Less バージョンを切り替えられます。
- ILess - ILess PHP コンパイラーのライブデモ。
- Leafo - Lessphp ライブデモ。
- Less2CSS - ブラウザーでホストされ、Less をリアルタイムに編集・CSS へコンパイルできるオンライン統合開発環境 (IDE)。
- LessPHP - Less.php ライブデモ。
- Lesstester - Less CSS 向けオンラインコンパイラー。
- Precess - リアルタイムプリプロセッサーコンパイラー。
- Winless - Less の学習を助けるオンライン Less コンパイラー。下記の例を確認するか、自分の Less コードを試せます。
Less をサポートするオンライン Web IDE・プレイグラウンド
- CodePen - ウェブのフロントエンド向けプレイグラウンド。
- CSSDeck Labs - HTML、CSS、JS コードを含む実験（テストケース）をすばやく作れる場所。
- Fiddle Salad - すぐに使えるコーディング環境を備えたオンラインプレイグラウンド。
- JS Bin - JavaScript・CSS の人々がコードスニペットをテストするのを助けるために特別に設計されたウェブアプリ。
- JsFiddle - オンラインウェブエディター。
翻訳
記事
- Less 入門と Sass との比較
- 最高の Less チュートリアル: Less の包括的ガイド
- Less でより多くを実現する
- Less CSS でループを作る方法
- 単なる CSS ではなく、Less を使って Less CSS を作ろう
- Less を再訪する
書籍
動画
実験
- 3D ボタン
- 角丸 Mixin
- CSS3 カラーホイール
- デモ: 変数
- 簡単なボタン
- 線形グラデーション Mixin
- ナビゲーションバー
- レスポンシブグリッド
- サイズ変更可能な CSS のみのアイコン
- 三角形・矢印 Mixin
- さらに見る…
コミュニティ
貢献方法
貢献はいつでも歓迎します！ ここをクリックしてガイドラインを読む。
ライセンス
法律で可能な限り、Lucas Bassetti はこの作品のすべての著作権および関連・隣接権を放棄しています。