[CSS]sassを使うための下準備メモ
sassを使ってWebサイト制作する際に必要な事項をまとめて紹介していきます。
node.jsをローカルにインストール
node.jsをまずインストールしておきます。
インストール後にnode -vで確認してバージョンが出てくればOK。
コマンドラインでの操作
次にプロジェクトフォルダに移動し、フォルダー直下のディレクトリに移動→コマンドラインでnpm initを入力します。
次にnode-sassをインストール。開発環境なので–save-devと入力。
npm install node-sass --save-dev(jQuery使う場合) npm install jquery –save を入力
–save -dev –saveの違いはこちらの記事を参照。
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
scssファイルの準備
次にフォルダー直下のディレクトリにscssファイルを準備します。sassとでも付けましょう。
次にそのフォルダーの中にscssファイルを作成します。main.scssとでも付けます。
package.jsonファイルの書き換え
次にコマンドラインからsassにコンパイルするためのスクリプトを書き換えます。
npm initの時点でpackage.jsonというファイルが作成されていますので、こちらを開きscriptの箇所を以下のように書き換えます。
"scripts": { "compile:sass": "node-sass sass/main.scss style.css" }style.cssはコンパイルした後に集約されるファイルを記載します。
あとはターミナルにて、npm run compile:sassと入力すればスクリプトが走りmain.scssのファイルがstyle.cssに反映されます。
上記のままだとスタイルを変更する度にnpm runしなくてはいけないので以下のようにします。
"scripts": { "compile:sass": "node-sass sass/main.scss style.css -w"}-w は毎回コンパイルしなくてもscssファイルが更新されれあば自動でコンパイルするように設定するためのものです。(watch 常時監視)
