60

Less / Sassで構築されたCSSのメンテナンスをどのように行いますか？

Dev Tools / Firebugについて私が気に入っていることの1つは、cssスタイリングの行番号を確認できることです。変更したいコードを見つけるために.less/.scssファイルを手動で検索する以外に、CSSプリプロセッサでこれを行う良い方法はありますか？

4

5 に答える 5

33

Chrome Developer Toolsは、すぐに使用できるSassデバッグをサポートするようになりました。

ソースマップを含めるように更新：
以前のバージョンでは、cssでインラインコメントを使用して、ソースコードへの参照を提供していました（以下のハウツーを参照）。最近のバージョンのsass（3.3+）とchrome（31+）は、そのためにソースマップを使用しています。

  1. Sass3.3.xがあることを確認してください
  2. --sourcemapフラグを使用してSassをコンパイルします。
  3. Chrome / ium DevToolsで設定を開き、[全般]をクリックします。
  4. 「CSSソースマップを有効にする」をオンにします。

詳細については、Chrome開発ツールのブログをご覧ください： https ：//developers.google.com/chrome-developer-tools/docs/css-preprocessors

古いバージョン：
1。まず、Sassを--debug-infoオンにしてコンパイルする必要があります。
2. Chrome / iumでabout：flagsに移動し
ます。3。デベロッパーツールの実験を有効にします
。4。インスペクター（F12）で[設定]を開き、[実験]タブに移動して、[SASSのサポート]をオンにします。

于 2012-10-07T07:16:59.933 に答える
28

どちらを使用するかを選択する場合は、css-tricksに関するこの記事に興味があるかもしれません。

LESSまたはSASSを使用すると、欠点よりも利点が多いことを経験しました。これは確かに不利ですが、ファイルを適切に構造化して、他の参照を使用して探しているスタイルを簡単に見つけられるようにすることをお勧めします。ここでできることがいくつかあります。

  • スタイルシートの領域を文書化します。すなわち/* General */、/* Header */および/* Footer */
  • すぐに認識できるクラスには、論理的でわかりやすい名前を使用します（error1-error10などのように番号を付けないでください）。
  • クラス/要素/IDセレクターを分析し、それらをどのように/どこに記述したかを考えることを学びます。
  • CTRL+を使用しますF。多くの場合、正確な属性またはその近くの属性は、この方法でかなり簡単に見つかります。

SASS

ファイアバグインスペクターでsassファイルを読み取って表示する拡張機能を使用してFirefoxでSASSをデバッグする方法があります。使用するには、拡張機能をインストールし、それぞれのデバッグフラグを有効にします。

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

編集：2014-07-06の時点で、このプラグインはダウンロードできなくなりました。FireSassは廃止されました。

Chrome / Webkitのバージョンがネット上に登場しており、SASSデバッグのサポートを追加するためのChromeのベータ機能があります。これは、Firefoxバージョンで使用されているものと同じデバッグ情報に基づいています。現時点では、それらのいずれかを適切に判断することはできません。また、この記事の執筆時点で、ジョブのプラグインとして公に認められているものも見つかりませんでした。

LESS / STYLUS

このツイート@jaketrentが説明しているように、クロムのデバッグ側では進歩がありますが、まだ何も焼き付けられておらず、LESS githubの状態を考えると、まだしばらく時間がかかる可能性があります...両方のソリューションはのベータ機能に基づいていますChromeでのSASSデバッグサポート。基本的にSASSと同じデバッグ情報を追加します。

于 2012-03-26T00:44:36.980 に答える
1

LESSでのメンテナンス/デバッグに問題が発生することはめったにありません。常にサーバー側でコンパイルし、HTMLページのCSSファイルのみを参照します。これにより、Webページおよびディスク上のファイルと常に1対1で対応できるようになります。

そして、LESSファイルを編集する必要があるとき、LESSは、CSS +余分なマークアップがほとんどなので、混乱しているものをCSSの元のステートメントにさかのぼることが非常に簡単であることがわかります。それがミックスインの場合、それは非常に明白です（私は通常、すべてのベンダープレフィックスを繰り返し実行する必要がないようにミックスインを使用するため）。クラスのネスト機能を使用するため、論理的な階層になります。

div#awesome aside ul

見つけるのと同じくらい簡単です：

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

（ただし、3層を超えないようにしています）

私はSASSの実際の経験はありませんが、数年前に最初にCSSを調べたとき、CSSからどれだけ離れているかが気に入らなかった（そしてそれ以来戻っていない...）

于 2012-03-26T00:50:19.013 に答える
1

いくつかのヒント：

  • バージョン管理に.sassファイルと.cssファイルの両方を含めます。このようにして、誰もが最新の変更を行うことができます。
  • スタイルシートを論理的な領域に整理すると、メンテナンスが簡単になります。
  • また、3つ未満のメインカラーを使用してから、SASSカラー関数を使用してそれらを変更し、デザイン/テーマ全体で再利用できる変数に結果を保存してください。

元： $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

そうすれば、1つの色を維持するだけで済みます。そして残りは再計算されます。

最近まで、ブラウザ内のSASSデバッグツールはありませんでした。

FireSASSと呼ばれるFirefoxプラグインがあります（https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/）

コマンドにforをsass --watch追加して、プラグインの実行に必要なフックを出力するようにします。-g--debug-info

于 2012-04-02T19:42:18.613 に答える
1

ファイアサスのため、レスからサスに切り替えました。これにより、firebugで元のsassラインを取得できます。

sassを使用する場合はfiresassをインストールします

于 2012-04-24T08:27:40.213 に答える