15 の非常に実用的な Sass および Compass ツールを共有する_html/css_WEB-ITnose

Sass は CSS の拡張機能であり、ネストされたルール、変数、ミックスイン関数などを追加しています。 CSS コードの整理と保守のコストが簡素化されます。 Compass は、CSS3 と一般的なデザイン パターンの使用をこれまでより簡単にするオープンソースの CSS フレームワークです。

この記事では、Web アプリケーションを迅速に構築するのに役立つ便利な Sass ツールと Compass ツールのセットを集めました。

1. Compass.app

Compass は、スタイルシートとマークアップの構築と保守を容易にするスタイルシート オーサリング フレームワークです。Compass.app はメニューバーではなく、Sass で作成します。 Sass および Compass 用の唯一のアプリです。Compass.app は Java (JRuby) で書かれており、使用するために Ruby 環境をインストールする必要はありません。

2. Scout

Scout は、自己完結型の Ruby 環境で Sass と Compass を実行するクロスプラットフォーム アプリであり、Scout は自己完結型の Ruby 環境で Sass と Compass を実行し、すべての数回クリックするだけで Sass プロジェクトを作成できます。Ruby のセットアップについて心配したり、技術的な問題に対処したりする必要はありません。Scout がすべての面倒な作業を行ってくれるので、好きなことに時間を費やすことができます。

3.

Codekit は、Sass、Compass、Less、Stylus、Jade、Haml、Slim、CoffeeScript、および JavaScript ファイルを保存するたびに自動的に処理する強力なコンパイラーであり、ライブブラウザーのリロード、画像の最適化、簡単なデバッグにより、Compass と Sass を操作できるようになります。このアプリはチームのコラボレーションも提供し、ファイルを結合して縮小することで読み込み時間を短縮します。Archteype は、構成可能で構成可能な UI パターンとコンポーネントを作成するための Compass/Sass フレームワークです。自然言語構文。

5. Susy

Susy は Compass にレスポンシブ グリッドを提供し、新しいレイアウトにメディア クエリ ブレークポイントをすばやく追加したり、Susy の数学を使用して独自の計算を作成したりできます。グリッド ヘルパーの配列。数分でサイトを構築したり、大規模なプロジェクトで使用するためのスケーラブルなグリッド ライブラリを作成したりするのに役立ちます。

6. The Saasway は、クラフトに関する最新のニュースとトピックをカバーしています。 Sass と Compass を使用した CSS。初心者と上級ユーザーの両方に適した記事、リソース、チュートリアルが含まれています。

7. Sassaparilla を使用すると、Sass と Compass を使用してレスポンシブ Web プロジェクトを迅速に開始でき、コンパイル中に px で作業できるようになります。 ems により、デザイナーが頻繁に行う必要のある多くの数学が不要になります。

8. LivingStyleGuide

LivingStyleGuide Gem は、Sass と Compass を使用してフロントエンド スタイル ガイドを作成する簡単な方法です。 Sass に Markdown を追加するだけでガイドを作成できます。

9. Pondasee

Pondasee は、フロントエンド デザイナーが Web アプリケーションを作成するためのワークフローを加速できるようにするために作られました。これは CSS フレームワークではなく、フロントエンドです。 -end テンプレートの構築を支援する SCSS と Compass の機能を組み合わせたスターター キットです。

10. LiveReload はメニュー バーに常駐し、ファイルを保存するとすぐにファイル システムの変更を監視します。必要に応じて前処理され、ブラウザが更新されます。SASS、Compass、LESS、Stylus、CoffeeScript、IcedCoffeeScript、Eco、SLIM、HAML、Jade が付属しており、2 つの主要なチェックボックスで制御されるため、迷うことはありません。

11. Koala

Koala は、より効率的な Web 開発者になるための、CoffeeScript、Compass、Less、および Sass コンパイル用の GUI アプリで、リアルタイム コンパイル、マルチ機能が含まれています。 -言語サポートなど

12. Bootstrap Sass

Bootstrap-Sass は、Sass ベースのバージョンの Bootstrap で、Sass を利用したアプリケーションに最適です。Rails、Compass、または Sass のみでインストールできます。

13. Forge

Forge は、Sass、LESS、CoffeeScript などのフロントエンド言語を使用して整然とした環境で WordPress テーマをブートストラップおよび開発するための無料のコマンドライン ツールキットです。および単純なスキャフォールディング (ベース テンプレート ファイル、SCSS ファイル、テーマ オプション) は、変更を保存してテーマで作業すると、ソース フォルダーがローカルの WordPress インストールに自動的にコンパイルされます。

14. Prepros

Prepros は、コードのコンパイルを容易にすることに特化したアプリです。 Sass、Scss、Compass、Less、Jade、Haml、CoffeeScript をすべてリアルタイムでコンパイルし、ブラウザのライブ更新により前処理ワークフローをシームレスに保ちます。依存関係はなく、組み込みの HTTP サーバー、バックグラウンド ファイル監視、エラー通知、ライブ CSS インジェクションを備えています。

15. Break Point

Breakpoint を使用すると、Sass でのメディア クエリの作成が非常に簡単になります。最も一般的に使用されるメディア クエリに基づいて、簡略化された構文を使用して変数を作成し、「ブレークポイント」ミックスインを使用してそれを呼び出すだけです。ブレークポイントは、メディア クエリ自体の作成からブラウザ間の互換性の問題の処理に至るまで、すべての面倒な作業を処理します。