多くの場合、Web 開発者拡張機能の「CSS の編集」機能を使用して、スタイル シートを編集します。
これは素晴らしい機能ですが、css を編集してエディターにコピーして保存するには時間がかかります。
次のプロジェクトで Compass を使用する予定ですが、SASS/Compass で「css の編集」機能をどのように使用できるか疑問に思っています。
多くの場合、Web 開発者拡張機能の「CSS の編集」機能を使用して、スタイル シートを編集します。
これは素晴らしい機能ですが、css を編集してエディターにコピーして保存するには時間がかかります。
次のプロジェクトで Compass を使用する予定ですが、SASS/Compass で「css の編集」機能をどのように使用できるか疑問に思っています。
あなたが期待している方法でこれを行う方法はありません。
フローは次のように機能する必要があります->
Compass/SCSS を作成 -> ページを更新 -> CSS を編集して結果を取得 -> 前の手順で SCSS を再編集、またはコピー/貼り付けします。
コンパイルされるため、SCSS レイヤーにフックする解決策はまだわかっていません。
これは、Chrome 開発ツールでのSass の実験的サポートにより可能になりました。
最初に Sass のサポートを有効にします。
次に、圧縮以外のものにコンパイルしていることを確認し、Sass でデバッグ情報を有効にします。コマンド ラインからコンパイルしている場合は、--debug-info
フラグを渡します。Compass を使用している場合は、これを に追加しますconfig.rb
。
sass_options = { :debug_info => true }
さきほど、開発ツールで Sass ソースにアクセスできます。
開発ツールの行番号をクリックすると、ローカルの変更を編集して適用できます。
個人的には、LiveReloadcompass watch
と組み合わせて使用し、エディターで編集することを好みますが、ブラウザーで編集するのが好きな方のために、Sass ファイルを直接編集できるようになりました。
展開する前に圧縮してコンパイルすることを忘れないでください。
Codekitは、ローカル ファイルを編集できる OSX 向けの優れた製品であり、保存をクリックすると、ページを更新することなく、新しくコンパイルされたスタイルシートがブラウザーに自動的に挿入されるため、少なくともその手順を節約できます。ただし、現時点では、私が認識している Windows の対応物はまだありません。
最近、SCSS を使用していたかなり大規模なプロジェクトで Codekit を使用しましたが、確かに役に立ちました。悲しいことに、あなたと同じように、私は「CSS の編集」Web 開発者ツールバーのワークフローに慣れており、SASS の世界への正確な翻訳をまだ見つけていません。
いくつかの可能性を秘めたもう 1 つのオプション (ただし深刻な欠点もあります) は、Fog Creek のWeb Puttyと呼ばれるオープン ソース フレームワークです。SASS および SCSS フレーバーの CSS を含む、ブラウザーで CSS をライブ編集できるようにするサービスでしたが、サービスを停止し、単にソフトウェアをオープンソース化したため、セットアップは完全にあなた次第であり、かなりの労力が必要です (それは欠点)。
やってる事は今と大差ないと思いますが…
コンパスはSass/SCSSで書かれたスタイルシートをプリコンパイルし、ブラウザに届く頃には通常のスタイルシートになっているので、ブラウザのツールバーの「CSSの編集」機能を使えば今と同じように動作します。 SASS/SCSS ファイルに戻って、適切な場所に変更を挿入する必要があるだけです (たとえば、SASS/SCSS ファイルの記述方法に応じて、ネストされたルールまたは mixin または関数内にある可能性があります)。コンパスはスタイルシートを再コンパイルできます