web-dev-qa-db-ja.com

Less = SassデバッグChrome Dev Tools / Firebug

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

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

csssasslesssource-maps
59
Dave Stibrany

使用するものを選択する場合は、 css-tricksに関するこの記事 が参考になるかもしれません。

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

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

[〜＃〜] sass [〜＃〜]

Firebugインスペクターで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の状態を考えると、まだ時間がかかるかもしれません...両方のソリューションクロムのSASSデバッグサポートのベータ機能に基づいており、基本的にSASSと同じデバッグ情報を追加します。

28
sg3s

Firesassのせいで、私はlessからsassに切り替えました。これにより、firebugで元のsass行を取得します。

install firesass sassを使用する場合

1
yvess

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

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

div#awesome aside ul

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

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

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

SASSの実際の経験はありませんが、CSSから数年前に最初に見たとき（そしてそれ以降戻っていない...）

1
tkone