1. Sass概要
SassはCSSプリプロセッサで
Sass記法とScss記法（Sassy CSS）があります。
現在の主流はScssです。
CSSからScssへ移行した際のメリットは
- 記述の簡略化（入れ子構造）
- 専用のコメント（CSSなのに1行コメント等）
- 変数を使用して、同じ値を使い回せる
- extendを使用して、セレクタを使いまわせる
- mixinを使用して、スタイルをまとめ使いまわせる
- Partialを使い、複数のSassを1つのCSSにまとめることができる
- 条件分岐や繰り返し処理がCSSなのに可能に
- CSSへコンパイルする際は圧縮できる
- 様々なフレームワークの基礎となっている
ということで、Sassを導入してみました。
2.2つのSassについて
Sassには、大きく分けて
・node-sass(LibSass)
・Ruby Sass
があります。
Ruby Sassは、Rubyで開発されたSassですが
node-sassは、C/C++で開発されたSassです。
そのため、node-sassは
Node.js以外（PHP,Phython,Scala）でも使用可能です。
一番大きなメリットはRuby sassよりも圧倒的に早いことです。
というわけで今回は
mac環境でnode-sassの環境構築をしていきます。
3.Node.jsのインストール
まずは、Node.jsをダウンロードしていきましょう。
https://nodejs.org/ja/
特に理由がなければ、左側の推奨版で構いません。
解凍次第、
ターミナル（黒い画面）にいき、
node -v
と打つことで
node.jsのバージョンを確認することができます。
（これでちゃんとインストールできたかを確認することができます。）
4.gulpのインストール
このgulpは、タスクランナーソフトで、
様々な処理を自動化する役割です。
Sassを使用する場合、最終的にはCSSにコンパイルする必要があるため
タスクランナーを使い自動化させています。
4-1.gulp-cilのインストール
gulpのインストールには
Node.jsのパッケージ管理マネージャであるnpmを使用していきます。
nmp install --global gulp-cil
これで、グローバルにインストールできましたので、
インストールしたマシンのどのディレクトリでも
gulpコマンドを使用することができるようになりました。
gulp -v
を使用して、インストールできているか
確認しておきましょう。
※---------------------------------------------------
自分の場合は最初に
「permission denied」というエラー（要は権限不足）が出たので
chmod ７７７ 5_sass_test.txt
として回避しました。
permission deniedで悩まされたので勉強してみた
※---------------------------------------------------
4-2. package.jsonの作成
これで、package.jsonが作成されます。
npm init -y;
4-3. gulpのインストール
次にgulpとgulp-sassをインストールしていきます。
npm install --save-dev gulp
実行し、成功するとこのように
「package.json」が作成されます。
4-4. gulp-sassのインストール
これだけでは自動更新されないため
gulp-sassも追加
npm install --save-dev gulp-sass
4-5. gulpfile.jsの作成
ここまでで自動化を行う下地ができたので、
次にjavascriptファイルに、自動化の内容を書き込んでいきます。
が、基本的にはコピペで大丈夫です。
gulupfile.jsは下記サイトからもってきましょう
https://www.npmjs.com/package/gulp-sass
色々なバージョンがありますが、
一番基本的なこいつ（下記）をgulpfile.jsとして手動で作成
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
これで終了です。
お疲れ様でした。
同じ環境を構築したい場合
もし同じ環境を構築したい場合は,
4-1.gulp-cilのインストール
nmp install --global gulp-cil
の後に、今回作成したpackage.jsonがある状態で
npm install
と行うだけで、全てのパッケージがインストールされます。
同じ環境を作成するにはpackage.jsonが重要ということですね。