[HTML & CSS General] Pesticide で CSS Layout をデバッグする
CSS の定義を追加することで、さまざまなデバイスでの Layout が確認しやすくなります。
Browser Extension と CSS 版があります。
どちらも、下記の定義を追加して Layout の状況を分かりやすく表示してくれます。
Contents
インストール
もろもろ Github を確認するとよさそう。
Sass
サイトから圧縮ファイルをダウンロード。
Bower などにはパッケージはないよう。
zip を解凍すると、scss ファイルが見つかるので、適当なプロジェクトディレクトリに設置します。
% mv ~/Downloads/mrmrs-pesticide-e3dd6b9/sass/pesticide.scss global/_pesticide.scss
Sass に @import して利用します。
main.scss
/* Debug */
$pesticide-debug: true;
@import "global/pesticide";
less, stylus ファイルもありました。
CSS
CSS を直接読み込むこともできます。
<link rel="stylesheet" href="css/pesticide.css">
Browser Extension
つかいかた
true / false でコントロールできます。
ただ余計なコードが増えるので、コメントアウトで利用かな。
main.scss
/* Debug */
$pesticide-debug: false;
@import "global/pesticide";
