2019年6月4日

Sass入門

gulpを使って、SassファイルからCSSファイルを作る。

Sassとは

Sass(サス)は、CSSを効率的に書いたり管理するための言語。

SassとCSSの違い

たとえば、以下のようなHTMLがあって、

<!-- 適当に構成されたパターン -->
<div class="hoge">
  <div class="inner">
    <span><span>
    <p>
      <span></span>
    </p>
  </div>
</div>

<!-- BEMっぽく構成されたパターン -->
<div class="fuga">
  <h2 class="fuga__title"></h2>
  <div class="fuga__body">
    <a href=""></a>
  </div>
</div>

以下のようなCSSがあるとする。

/*-- 適当に構成されたパターン --*/
.hoge {
  width: 600px;
}

.hoge .inner {
  padding: 10px;
}

.hoge .inner > span {
  font-weight: bold;
}

.hoge .inner p {
  padding: 5px;
}

.hoge .inner p span {
  color: #123456;
}

/*-- BEMっぽく構成されたパターン --*/
.fuga {
  border: 1px solid #ccc;
}

.fuga__title {
  font-size: 1.8rem;
}

.fuga__body {
  font-size: 1.4rem;
}

.fuga__body a {
  color: #123456;
}

.fuga__body a :hover {
  text-decoration: underline;
}

このCSSをSass(ここでは特に「SASS記法」と呼ばれる書き方を使用)で書くとこうなる。

// 1行コメントはスラッシュ2個で書ける

// 「$」を使って変数が作れる
$focusColor: #123456;

/*-- 適当に構成されたパターン --*/
.hoge {
  width: 600px;

  // 親子関係は入れ子で表現できる
  .inner {
    padding: 10px;

    // 子セレクタも入れ子で表現できる
    > span {
      font-weight: bold;
    }

    p {
      padding: 5px;

      // 深くしすぎると可読性が落ちそう
      span {

        // 値を変数で指定できる
        color: $focusColor;
      }
    }
  }
}

/*-- BEMっぽく構成されたパターン --*/
.fuga {
  border: 1px solid #ccc;

  // 親のclass名(ここでは.fuga)は「&」で継承できる
  &__title {
    font-size: 1.8rem;
  }

  &__body {
    font-size: 1.4rem;

    a {
      color: $focusColor;

      // 擬似クラスも入れ子で表現できる
      :hover {
        text-decoration: underline;
      }
    }
  }
}

これをsample.scssとして保存(拡張子は.sassではなく.scssであることに注意)する。

SassをCSSにビルドする

ブラウザはSassを解釈することができないので、本番で使用するのはあくまでCSS。ここではgulpを使用してSassからCSSを作る(ビルドする)。

プロジェクトフォルダ(たとえばgulp-sass-test)を任意の場所に作って移動。

cd フォルダをドラッグ&ドロップ

フォルダを以下のように構成し、

gulp-sass-test
└── dev
    └── sass
        └── sample.scss

簡易初期化。

npm init -y

プロジェクトフォルダ直下にgulpfile.jsを作成。

// モジュールを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass');

// 各パス
const paths = {
  "dev": {
    "sass": "./dev/sass"
  },
  "dist": {
    "css": "./dist/css"
  }
}

// SassをCSSにビルド
function sass_to_css(){
  // コンテンツを取得
  return gulp.src(paths.dev.sass + '/*.scss')
    // ビルド処理
    .pipe(sass({
      // オプション:プロパティごとに改行する
      outputStyle: 'expanded'
    }))
    // 本番に配置
    .pipe(gulp.dest(paths.dist.css));
}

// 「test」という名前でタスクを実行する
exports.test = sass_to_css;

必要なモジュールをインストール。

npm i -D gulp gulp-sass

タスクを実行。

npx gulp test

distにCSSがビルドされればOK。