【コピペでカンタン！】 Sassの環境構築！

Sassはcssを拡張したメタ言語です！

親子関係にあるセレクタを入れ子(ネスト)にして書くことができたり、変数を使うことによって同じ値を使いまわせたり、cssをより効率的に記述することが可能になります^^

今回は、そんな便利なSassを使える環境を構築する方法を紹介します！

STEP.01　Node.jsをダウンロード！

Node.jsの公式サイト(https://nodejs.org/ja/)から、インストーラーをダウンロード。

安定版である左のLTSをお勧めします^^

Node.jsがきちんとインストールされたか、コマンドラインで確認しましょう！

$ node -v

MacBook:~ username$ node -v
v14.15.4

このように、v~~　と表示されたら成功！

STEP.02　タスクランナー gulpをインストール

さまざまな処理を自動化してくれるツールであるgulpをグローバルにインストール（マシン自体にインストール）します！

gulpを使うことで、Sassのコンパイル作業がとても楽になります！

$ npm install --global gulp-cli

これで、どのディレクトリからでもgulpコマンドが使えます！

STEP.03　プロジェクトを作成

プロジェクトを作成するフォルダ（ディレクトリ）を作成します！

MacBook:~ username$ mkdir new_project

​作成したフォルダに移動して、package.jsonを作成。

MacBook:~ username$ cd new_project
MacBook:new_project username$ npm init -y

​STEP.04　gulpとgulp-sassを、プロジェクトフォルダにインストール

プロジェクトフォルダにgulpをインストール。

MacBook:new_project username$npm install --save-dev gulp

SassファイルをCSSファイルにコンパイルするために、gulp-sassをインストール。

MacBook:new_project username$npm install --save-dev gulp-sass

 ​STEP.05　gulpfile.jsの作成

gulpfile.jsを作成し、gulpで実行するタスクを記述していきます！

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function(){
   gulp.src("./sass/**/*.scss")
   .pipe(sass({outputStyle: "expanded"}))
   .pipe(gulp.dest("./css"))
});

これで、環境構築は完了！！

あとは、プロジェクトファイルのSassディレクトリにSassで記述したファイルを作成し、下記のコマンドを実行すると、CSSファイルにコンパイルしてくれます！

MacBook:new_project username$gulp sass

Sassは使いこなすと、とても便利^^

ぜひ使ってみてください！