【CSS】Sass（SCSS）をGulpでコンパイルしてみる

Gulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass（SCSS）をコンパイルします。それでは行きましょう！

【目次】

フォルダ作成→移動→package.json作成→Gulpインストール
パッケージ（gulp-sass）をインストールする
ファイルを作る
gulpfile.jsにgulp.task()を記述
htmlファイルを作成
scssファイルを作成
コンパイル実行
最後に

※参考：前回記事
【HTML】EJSをGulpでコンパイルしてみる（SyntaxErrorでちょい苦戦） - クモのようにコツコツと

※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com

フォルダ作成→移動→package.json作成→Gulpインストール

今回からAltCSSに入る。メタ言語選定の記事でも書いたようにAltCSSはSass（SCSS）が主流なのでこちらにトライする。

※参考：フロントエンドのメタ言語のコンパイル環境を作る（言語選定編） - クモのようにコツコツと

まずは準備編。ここまでは前回までとほぼ同じ手順。

node.jsとnpmは入っている前提（下記のコマンドでバージョン番号が出る）

node -v
npm -v

コンパイルを実行したいフォルダを作成する。今回は「gulp_sass」とする。

cdコマンドで移動する

cd /（フォルダ）/gulp_sass

package.jsonを作成

npm init -y

ローカルにGulpインストール

npm install -D gulp

パッケージ（gulp-sass）をインストールする

ここから固有の内容に入る。以前、Gulpインストールでお世話になったこちらの記事にGulpのインストールもあったので参考にする。

※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

Sass（SCSS）のコンパイルには「gulp-sass」をインストールする。

npm install -D gulp-sass

インストールに成功するとpackage.jsonに追記される。

  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2"
  }

ファイルを作る

「gulp_sass」フォルダにファイルを追加する。このような構成

gulp_sass
├css
│└common.scss
├index.html
└gulpfile.js

gulpfile.jsにgulp.task()を記述

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass',  () => {
    return gulp
        .src('css/common.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .pipe(gulp.dest('css'));
});

変数gulpでgulpを読み込む
変数sassでgulp-sassを読み込む
gulp.task()メソッド実行。第一引数はsass、第二引数は無名関数（引数はなし）
無名関数の中はgulp.src().pipe().pipe()とチェーンになっている
src()の引数はcommon.scssのパス
一つ目のpipe()の引数はsass()で、中にオプションのoutputStyleキーを設定（値はexpanded）
二つ目のpipe()の引数はgulp.dest()でcssフォルダに吐き出す

これまでと全体的な構成は変わらない。オプションoutputStyle: 'expanded'は一番最後の閉じブロック}を改行させる設定。

なお、参考記事にあるようにgulp.task()の第一引数をdefaultにするとコンパイルのコマンドがgulpだけで済む。（今回はgulp sassになるようsassにしてみた）

※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

htmlファイルを作成

以前、AltCSSの記事で書いた「SCSS」の内容を元に。

※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと

こちちらが元になったCodePen

See the Pen SCSS practice 1 by イイダリョウ (@i_ryo) on CodePen.

まずindex.htmlを作成。

HTMLコード

<!doctype html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>初めてのSass(SCSS)コンパイル</title>
   <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <section id="scss">
        <h1>SCSS事始め</h1>
        <p class="lede">CodepenのSettingの旅CSS編第2回。今回はSCSS。LESSに似てる？</p>
        <section id="nest">
            <h2>ネスト（階層化）</h2>
            <p>SCSSもdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。<br>
      ん？この書き方はLESSとほぼまったく同じだ。<br>
            <span class="bikou">インデントについても厳密でじゃでなくても解釈してくれるようだ（？）</span>
            </p>
        </section>
        <section id="oya">
            <h2>親セレクタの参照</h2>
            <p>おそらくLESSにはないSCSS専用の機能。ネストして「&」に擬似要素を付けると親セレクタを参照できる<br>
            <span class="bikou">この尾行欄につけている「※」印は「.bikou:before」ではなく「&:before」だけで済んでいる。 </span>
            </p>
         </section>
    </section>
</body>
</html>

CodePenのコードの外側にdoctype、htmlタグ、headタグ、bodyタグを追加。

headタグの中にCSSファイルのリンクを書いているが

<link rel="stylesheet" href="css/common.css">

まだcommon.cssが存在しないのでスタイルは当たっていない。

f:id:idr_zz:20191217085926p:plain

scssファイルを作成

HTMLと同様、「メタ言語」の記事の「SCSS」から。

※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと

common.scssを作成。

SCSSコード

#scss h1 {
  color: red;
  font-size: 2em;
}

#scss .lede {
  font-size: 0.8em;
}

#nest, 
#oya {
  background: #eee;
  padding: 20px;
  margin: 0 0 20px;
  h2 {
    color: blue;
    font-size: 1.5em;
    line-height: 1.2;
    }
  p {
    em {
      font-weight: bold;
      color: brown;
    }
.bikou {
font-size: 0.8em;
&:before {
    content: "※";
}
}
  }
}

コンパイル実行

いよいよ実行！

npx gulp sass

common.cssが追加された！

gulp_sass
├css
│├common.scss
│└common.css //追加された！
├index.html
└gulpfile.js

ブラウザをリロードすると… f:id:idr_zz:20191217092138p:plain やた！スタイル当たってる！

コンパイルされたCSSコード

@charset "UTF-8";
#scss h1 {
  color: red;
  font-size: 2em;
}

#scss .lede {
  font-size: 0.8em;
}

#nest,
#oya {
  background: #eee;
  padding: 20px;
  margin: 0 0 20px;
}

#nest h2,
#oya h2 {
  color: blue;
  font-size: 1.5em;
  line-height: 1.2;
}

#nest p em,
#oya p em {
  font-weight: bold;
  color: brown;
}

#nest p .bikou,
#oya p .bikou {
  font-size: 0.8em;
}

#nest p .bikou:before,
#oya p .bikou:before {
  content: "※";
}