2

多くの場合、Web 開発者拡張機能の「CSS の編集」機能を使用して、スタイル シートを編集します。

これは素晴らしい機能ですが、css を編集してエディターにコピーして保存するには時間がかかります。

次のプロジェクトで Compass を使用する予定ですが、SASS/Compass で「css の編集」機能をどのように使用できるか疑問に思っています。

4

4 に答える 4

1

あなたが期待している方法でこれを行う方法はありません。

フローは次のように機能する必要があります->

Compass/SCSS を作成 -> ページを更新 -> CSS を編集して結果を取得 -> 前の手順で SCSS を再編集、またはコピー/貼り付けします。

コンパイルされるため、SCSS レイヤーにフックする解決策はまだわかっていません。

于 2011-11-25T19:25:01.213 に答える
0

これは、Chrome 開発ツールでのSass の実験的サポートにより可能になりました。

最初に Sass のサポートを有効にします。

Sass の Chrome 実験的サポート

次に、圧縮以外のものにコンパイルしていることを確認し、Sass でデバッグ情報を有効にします。コマンド ラインからコンパイルしている場合は、--debug-infoフラグを渡します。Compass を使用している場合は、これを に追加しますconfig.rb

sass_options = { :debug_info => true }

さきほど、開発ツールで Sass ソースにアクセスできます。

Chrome の Sass ソース マップ

開発ツールの行番号をクリックすると、ローカルの変更を編集して適用できます。

ここに画像の説明を入力

個人的には、LiveReloadcompass watchと組み合わせて使用​​し、エディターで編集することを好みますが、ブラウザーで編集するのが好きな方のために、Sass ファイルを直接編集できるようになりました。

展開する前に圧縮してコンパイルすることを忘れないでください。

于 2013-02-21T05:32:04.033 に答える
0

コードキット

Codekitは、ローカル ファイルを編集できる OSX 向けの優れた製品であり、保存をクリックすると、ページを更新することなく、新しくコンパイルされたスタイルシートがブラウザーに自動的に挿入されるため、少なくともその手順を節約できます。ただし、現時点では、私が認識している Windows の対応物はまだありません。

最近、SCSS を使用していたかなり大規模なプロジェクトで Codekit を使用しましたが、確かに役に立ちました。悲しいことに、あなたと同じように、私は「CSS の編集」Web 開発者ツールバーのワークフローに慣れており、SASS の世界への正確な翻訳をまだ見つけていません。

ウェブパテ

いくつかの可能性を秘めたもう 1 つのオプション (ただし深刻な欠点もあります) は、Fog Creek のWeb Puttyと呼ばれるオープン ソース フレームワークです。SASS および SCSS フレーバーの CSS を含む、ブラウザーで CSS をライブ編集できるようにするサービスでしたが、サービスを停止し、単にソフトウェアをオープンソース化したため、セットアップは完全にあなた次第であり、かなりの労力が必要です (それは欠点)。

于 2012-08-28T13:33:03.543 に答える
0

やってる事は今と大差ないと思いますが…

コンパスはSass/SCSSで書かれたスタイルシートをプリコンパイルし、ブラウザに届く頃には通常のスタイルシートになっているので、ブラウザのツールバーの「CSSの編集」機能を使えば今と同じように動作します。 SASS/SCSS ファイルに戻って、適切な場所に変更を挿入する必要があるだけです (たとえば、SASS/SCSS ファイルの記述方法に応じて、ネストされたルールまたは mixin または関数内にある可能性があります)。コンパスはスタイルシートを再コンパイルできます

于 2011-05-31T20:06:28.360 に答える