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 加藤 陵二 (全て見る)
- canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！ - 2022年6月16日
- JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法 - 2022年4月21日
- 【jQuery】スクロールすると出てきてフッター直前で止まるフローティングボタンの実装 - 2022年2月22日
- AdobeXDのスタック機能とパディング機能を使って効率的に余白を管理しよう - 2021年12月15日
- 【Sass実践編】「ミックスイン」を使って効率的にスタイルを管理しよう！使い方と利点を紹介！ - 2021年10月19日
関連記事
関連する記事はありません
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー