Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説
CSSをより効率的に記述する、Sass（サス）という言語ですが、Sass自体はブラウザで読み取ることができません。
今回はWindows10で、SassをCSSに変換（コンパイル）するための環境構築手順をご紹介します。
過去にDreamweaverでSassのコンパイルを取り扱った記事もありますので、Dreamweaverを使用している方はこちらも参考にしてみてください。
Node.jsのインストール
まずNode.jsをインストールしましょう。
ブラウザでNode.jsの公式サイトにアクセスしインストーラをダウンロードします。
ダウンロードできたらインストーラを起動し、インストールしていきます。
ダウンロードできたらインストーラを起動し、インストールしていきます。
「Next」を選択してインストールを進めましょう。
無事インストールが完了したらコマンドプロンプトを開きnode.jsのバージョンを確認してみましょう。
|
1 |
node -v |
上記コマンドを入力し、バージョン情報が出れば無事にインストールされています。
コンパイルするための環境を構築
package.jsonの作成
今回はデスクトップに「test」というフォルダを作成し環境を作成してみましょう。 コマンドプロンプトで該当フォルダに移動し、下記コマンドを入力してpackage.jsonを作成します。
|
1 |
npm init -y |
これで「test」フォルダ内にpackage.jsonが作成作成されました。
gulpとgulp-sassのインストール
次にgulpをインストールします。
gulpとはタスクランナーと呼ばれるツールの一つで、さまざまな処理（タスク）を自動で行ってくれます。
タスクの記述はJavaScriptで記述します。
下記コマンドをコマンドプロンプトで入力しgulpをインストールしましょう。
|
1 |
npm install --save-dev gulp |
また、SassでCSSにコンパイルするために、gulp-sassをインストールします。
|
1 |
npm install --save-dev gulp-sass |
gulpfile.jsの作成
最後にgulpfile.jsを作成しタスクを書いていきます。
|
1 2 3 4 5 6 7 8 |
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")) }); |
上記を記述したJavaScriptを「gulpfile.js」という名前で該当フォルダ内に保存します。
これは「gulpとgulp-sassを読み込み、『sass』ディレクトリ内にある.scssファイルを『css』ディレクトリ内にコンパイルする」というタスクになります。
これでCSSにコンパイル出来るようになりました。
CSSにコンパイルしてみよう
では実際にSassを使ってCSSファイルにコンパイルしてみます。
「sass」ディレクトリに「sample.scss」というサンプルファイルを作成しました。
|
1 2 3 4 5 6 7 8 9 10 11 |
#main { width: 600px; p { margin-bottom: 20px; padding-top: 10px; } span { font-size: 16px; color: #222222; } } |
次にコマンドプロンプトで下記コマンドを入力します。
|
1 |
npx gulp sass |
「css」ディレクトリ内に「sample.css」というファイルが生成されればコンパイル成功です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#main { width: 600px; } #main p { margin-bottom: 20px; padding-top: 10px; } #main span { font-size: 16px; color: #222222; } |
自動コンパイル設定を追加
このままでもSassをコンパイル出来るようになったのですが、Sassを修正するたびにコンパイルを手動で行っていたら面倒です。
Sassファイルを保存したら自動でコンパイルしてくれるようにタスクを追加しましょう。
gulpfile.jsを開き、追加で下記コードを記述します。
|
1 2 3 |
gulp.task("watch", function(){ gulp.watch("./sass/**/*.scss", gulp.series(["sass"])) }); |
その後、コマンドプロンプトで
|
1 |
npx gulp watch |
と入力すれば自動でコンパイルしてくれるようになりました。
自動コンパイルを停止したいときは、コマンドプロンプト画面でctrl + cを押せば停止します。
さいごに
今回はSassを扱うための環境構築を解説しました。
環境構築がSassを始めるにあたっての一番の障壁と言われています。
この記事が少しでもSassを始める方の手助けになれば幸いです。
加藤 陵二
最新記事 by 加藤 陵二 (全て見る)
- Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説 - 2021年2月17日
- JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 - 2020年12月16日
- 手軽なCSSアニメーション！transitionプロパティの使い方（基礎編） - 2020年10月19日
- CSSアニメーションを使ったリンクボタンを作ってみよう！（実践編） - 2020年8月7日
- CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） - 2020年6月16日
最新記事
