C-limber's highへようこそ。
C-limber's highは山登りのサイトではなく、福岡システム開発WEB制作会社 C-limber(クライマー)株式会社の技術メモブログです。
福岡システム開発ホームページ制作をお探しの方はお気軽にご相談下さい。

2014年7月1日火曜日

[CSS][sass]source mapsの導入

17:06 Posted by Unknown , No comments
sass,compassを使って作業してたら
chromeのDeveloper Toolsでcssの確認した際に
どのscssファイルに記載しのか知りたくなることがあります。
そういう時のメモ

参考サイト
google chrome - Chromium: missing sass support - Stack Overflow
Sass - Compassのsourcemap出力 - Qiita

「souce map sass」で検索すると
いろんなサイトが出てきますが、古い記事が多いです。

chrome側の設定の話が出てきた時は古い記事です。

chromeのv30以降では標準でsassに対応してるらしいです。

手順
1. sassのアップデート
source mapへの対応はsassのv3.3.0以降のみとなるので、
まずそれをインストール
gem install sass -v '>=3.3.0alpha' --pre
結構時間かかりますが辛抱強く待ちましょう

---compassを使わない場合はこれで終了
sass --watch --sourcemap sass/styles.scss:styles.css

compassを使う場合は
Compassは現時点ではsourcemapの出力に正式対応していないのでalpha版をインストールする
2.compassのアップデート
gem install compass --pre

3.compassのconfig.rbに一文追加
sourcemap = true

以上でchromeのDeveloper Toolsにsassのファイル名・行番号が 出力されるようになります。


--------------------------------------
弊社では独自管理画面によるシステム開発、Web制作など幅広く対応しております。
お気軽に問い合わせ下さい。
福岡のシステム開発・Web制作 C-limber(クライマー)株式会社

0 コメント:

コメントを投稿