はじめに
生のCSSを書くよりも、Sassで書いたほうが良いらしい。
導入が想像よりも面倒だったので、備忘録として残す。
ざっくりとした理解で書いているので、誤解を生む表現もあるはず。
その点、ご注意ください。
ちなみに、本記事では、gulp.jsを使う方法を紹介する。
環境
- windows 10 home 64bit
- node.js 12.12.0
- gulp.js 4.0.2
- バージョン3と4では仕様が異なるため注意！
Sassとは
CSSを便利に書くための言語みたいなもの。
SASS記法とSCSS記法の2種類がある。
SCSS記法のほうが、CSSの書き方に近い。
本記事では、SCSS記法で進める。
ざっくりとした使い方（？）としては、
1. Sassを使えるように、環境構築する。
2. CSSで記述したい部分をSassで書く。
3. SassをCSSにコンパイルする。（.sassまたは.scssファイルを、.cssファイルに変換する。）
Node.jsアプリケーションでSassを使うには
Sassを自動コンパイルしてくれるgulp.jsを使うのが、調べてみたところ無難そう。
コンパイルが自動化されることで、Sassを書くだけで済む！
自分でCSSに変換する必要なくなる！
おおまかな流れとしては、
1. node.jsアプリ作成
2. そのアプリにディレクトリ移動
3. gulp.jsをローカルインストール
4. gulpfile.jsファイルを作成＆必要な情報の記述
5. package.jsonの記述
6. 開発開始！
Sass導入
Node.jsアプリケーションの作成
適当にNode.jsのアプリケーションを作成。
mkdir hoge_node_sass
cd hoge_node_sass
npm init
gulp.jsをインストール
npm install gulp --save-dev
npm install gulp-sass --save-dev
--save-devにしている理由は、gulpもSassも開発時にしか使わないため。
公開時には、コンパイルされたCSSが適用されるため、gulpもSassも不要。
ちなみに、グローバルインストールするとgulpコマンドが使えて便利だが、インストールするものはプロジェクトごとに管理したほうが良いらしいので、ローカルインストールがオススメ。
gulpfile.jsの作成
gulpfile.jsを同ディレクトリに作成。
constgulp=require('gulp')constsass=require('gulp-sass')// sassの読み込み先とcssの保存先指定consthoge=()=>{returngulp.src('./sass/**/*.scss').pipe(sass({outputStyle:'expanded'})).pipe(gulp.dest('./css/'))}// 自動監視のタスク、sassWatchって名前にするconstsassWatch=()=>{constwatcher=gulp.watch(['./sass/**/*.scss'])watcher.on('change',hoge)}// sassWatchをデフォルトのタスクに設定exports.build=sassWatchexports.default=gulp.series(sassWatch)package.json記述
"scripts"に"gulp": "gulp"を追加。
これにより、コマンドプロンプトからnpm run gulpと打つことで、gulpfile.jsの処理を実行できる。
"scripts":{"gulp":"gulp"}ディレクトリ構成
さいごに、ディレクトリ構成を載せておく。
├ css
├ // コンパイル後のCSSが自動で追加される
├ sass
├ hoge.scss // コンパイル前のSCSS（またはSASS）
├ gulpfile.js
├ index.html
├ package.json
開発開始
gulpを実行して監視モードにすれば、準備完了！
Sassでの開発開始！
npm run gulp
追加しておくと便利な機能
# ベンダープレフィックス
npm install gulp-autoprefixer --save-dev
constgulp=require('gulp')constsass=require('gulp-sass')constautoprefixer=require('gulp-autoprefixer')// 追記consthoge=()=>{returngulp.src('./sass/**/*.scss').pipe(sass({outputStyle:'expanded'})).pipe(autoprefixer())// 追記.pipe(gulp.dest('./css/'))}constsassWatch=()=>{constwatcher=gulp.watch(['./sass/**/*.scss'])watcher.on('change',hoge)}exports.build=sassWatchexports.default=gulp.series(sassWatch)さいごに
書いてるうちにSassというよりもgulpの説明がメインになってた気がする…
間違いやご指摘などあれば、コメントよろしくお願いします。
参考サイト
- https://gulpjs.com/
- gulp.js公式
- https://liginc.co.jp/web/tutorial/117900
- v3系の内容だが、gulpによるSassの自動コンパイルについてわかりやすい記事
- https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a
- 同じくv3系の内容だがわかりやすい記事
- https://qiita.com/Michinosuke/items/11908fd276d1794aedeb
- v4系の内容で、シンプルにまとまっていて参考になる記事