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

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

WBOY

リリース： 2016-06-24 11:16:24

オリジナル

975 人が閲覧しました

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