Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE
今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせる バラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃える フォルダ構成 フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty
GruntでSass/Compassのコンパイル+ブラウザ自動リロード
なんか最近みんなGrunt使い出してて便利便利言ってるので僕も使ってみた。 なにやりたいかCompassのコンパイルファイル更新時にブラウザの自動リロード他にもやりたいけど、今日使い始めたのでまずは上記だけ出来るようにする。 インストールとかkojikaさんのこの記事見ると一発で分かる。ありがとうございます!!! ブラウザに拡張機能インストールする LiveReload用の拡張機能をインストールする。とりあえずChrome用はこれ。 ファイル階層ファイル階層、以下のような感じを想定する。ブラケットで囲ってるのはフォルダ。 [project] ├[files] │ ├[_scss] │ │ ├_*.scss │ │ └style.scss │ ├[js] │ ├index.html │ └style.css ├[node_modules] ├config.rb ├Gruntfile.js └
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
