いまさら聞けない sass 入門(前編)

sass とは？

Syntactically Awesome Stylesheets の略で『サス』と読みます。

直訳すると、文法的にイケてるスタイルシートという意味だそうです。

世間では css メタ言語とか css プリプロセッサとか呼ばれていますが、css の機能拡張版と思ってもらえば良いでしょう。

ちょっとだけ歴史の話

具体的な解説に入る前に、sass が登場するまでの経緯と歴史について触れておきます。

『文法的にイケてるスタイルシート』が必要となった理由は、その名の通りだと思うので敢えて何もいいません。

当初 sass は Haml とセットで登場してきたこともあり、以下のような文法でした。

ul
    margin: 0
    li
        margin: 10px

この文法を sass 記法と呼びます。

これだけで、css にはないネスト構造を表現できる機能があるってことがわかりますね。

css に苦しめられてきた人にとってはこれだけで非常に意味のあるものでしたが、当初いまいち人気が出ませんでした。

はっきりした理由はわかりませんが、個人的にはウェブデザイナーたちが新しい記法を覚えることを嫌ったのではないかと考えています。

その後、現在主流となっている scss 記法(Sassy CSS)が登場します。

ul {
    margin: 0;
    li {
        margin: 10px;
    }
}

拡張された機能はそのままに、基本文法は css 互換というものです。

新しく覚える量が少なく、必要な拡張機能だけ利用すれば良いのは魅力的でした。 これによって既存プロジェクトにそのまま適用することが可能となり、広く利用されるようになったようです。 こういった経緯もあり、sass は事実上 scss 記法がデファクトとなっています。

本ブログでも scss 記法を使って解説していきます。

sass を利用する準備

解説を読みつつ実際の動作も確認してほしいので、sass の動作環境を構築する方法も書いてみます。

sass をコンパイル方法はいくつかありますが、本記事では gulp を使って進めていきます。

node.js のインストール

gulp を使うには node.js が必要ですので、まずは node.js をインストールします。

手順はこちらの記事を参考にしてください。

racchai.hatenablog.com

node.js がインストールできたら、package.json を作成します。今回は何も入力せずにすべてエンターキーを押してしまいます。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (racchai) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /tmp/hoge/package.json:

{
  "name": "racchai",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

これで準備が整いました。

gulp と gulp-sass のインストール

まずはコマンドラインツールとして gulp-cli をインストールします。グローバルインストールしますので-gオプションを付与しています。

$ npm install -g gulp-cli

次に gulp 本体と sass をコンパイルするためのプラグインである gulp-sass をインストールします。それぞれ --save-dev オプションを付与し、開発時に必要なプラグインとして package.json に追記します。

$ npm install --save-dev gulp gulp-sass

gulpfile を作成

必要なプラグインがインストールできたら、gulpfile でタスクを定義します。

$ cat > gulpfile <<EOF
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('default', function() {
    gulp.src('racchai.scss')
        .pipe(sass())
        .pipe(gulp.dest('.'));
});
EOF

これで racchai.scss という sass ファイルをコンパイルして、カレントディレクトリに結果を出力するタスクが作成できました。

さっそく racchai.scss ファイルを作成してコンパイルしてみましょう。

$ cat > racchai.scss <<EOS
ul {
    margin: 0;
    li {
        margin: 10px;
    }
}
EOS

$ gulp

成功したら結果を確認してみます。

$ cat racchai.css
ul {
  margin: 0; }
  ul li {
    margin: 10px; }

問題なくコンパイルできているようですね！

scss の変更を watch する

scss ファイルを編集するたびに gulp コマンドを打っていては効率が悪いので、scss の変更を検知したら自動でコンパイルを実行する watch 機能を利用します。

さきほどの gulpfile に以下を追記して、watch タスクを定義しましょう。

gulp.task('watch', ['default'], function() {
    gulp.watch('racchai.scss', ['default']);
});

あとは gulp watch コマンドを実行しておけば、scss ファイルが変更されると自動でコンパイルされるようになります。これで準備が整いました。

後編へ続く

ここまでの説明が長くなってしまったので、sass の具体的な機能の説明については次の記事で書くことにします。

racchai.hatenablog.com

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語