技術Sassはそのままではブラウザから読み込まれないので、コンパイルしてCSSに変換する必要があります。ここでは、Gulpというタスクランナーを使って、SassをコンパイルしてCSSにする方法を解説します。Node.jsのインストールGulpはNode.js上で動作するため、Node.jsをインストールする必要があります。Node.jsをインストールする方法には、大きく分けて二つの方法があります。インストーラーからインストールする一つ目は、インストーラーを使ってインストールする方法です。公式サイトから、最新版のインストーラーをダウンロードしてきて、実行するだけですので、とても簡単にできます。(mac環境のみ)インストーラーを使う方法は簡単ですが、バージョン管理がしにくいため、Node.jsのバージョンが上がったり、開発チーム内でバージョンを揃えたりしたい場合には不向きです。このような場合には、Node.jsのバージョン管理システムである、nodebrewを使ってインストールしましょう。こちらのサイトのREADMEに沿ってインストールしていきます。黒い画面に慣れていなくても、基本的に順番にコマンドを打っていけば大丈夫ですので、頑張りましょう。PATH=$HOME/.nodebrew/current/bin:$PATH========================================curlコマンドでnodebrew本体をインストールしたら、PATHを通します。.bash_profileに下記を書き込んで保存します。PATH=$HOME/.nodebrew/current/bin:$PATH次に、下のコマンドで利用できるNode.jsのバージョンを確認します。ls-remoteコマンドを打つと、使えるNode.jsの一覧が表示されますので、その中に最新版のバージョンがあることを確認します。2018年2月15日現在では、安定版の最新がv8.9.4ですので、v8.9.4を下のコマンドでインストールします。successfully」と表示されたら、Node.jsのインストールは成功です。次のコマンドで、インストールされたNode.jsのバージョンを確認します。none「current」は現在使用しているNode.jsのバージョンを表します。インストールしただけで、使うバージョンを指定していないので、「none」となっています。次のコマンドで、使うバージョンを設定します。使用するバージョンを変更したい場合も、次のコマンドを使用します。v8.9.4Node.jsのバージョンを確認します。-vv8.9.4設定したバージョンが表示されれば、完了です。GulpのインストールGulpをインストールします。GulpはNode.jsのパッケージ管理システムである、npmを使ってインストールします。Gulpは「gulp-cli」と「gulp」の二つのパッケージをインストールする必要があります。「gulp-cli」はPCで共通の環境にインストールするため、「–global」オプションをつけてインストールします。gulp-cli次に、「gulp」は作業ディレクトリ配下のローカルにインストールします。npmで初めてローカルにインストールする場合には、npmのバッケージを管理するファイルを作成するために、次のコマンドを実行します。init対話形式でファイルが作成されるので、順番に項目を入力していきます。設定が必要なければ、デフォルトのままで、Enterだけ押していけば大丈夫です。最終的に「package.json」という、JSONファイルが作成されて、ここにインストールしたパッケージの種類とバージョンが記録されます。それでは、次のコマンドで「gulp」をインストールします。「–save-dev」オプションは、package.jsonに開発用のパッケージとして、情報を記録するオプションです。gulp以上で、gulpのインストールは完了です。gulp-sassのインストールGulpでSassをコンパイルするためのパッケージ、「gulp-sass」をインストールします。インストール方法は「gulp」を同じです。gulp-sassGulpタスクの作成と実行Sassをコンパイルするための、Gulpタスクを作成します。Gulpのタスクは、「gulpfile.js」というファイルに、javascriptで記述します。gulpfile.jsの作成Sassをビルドするための、最低限のタスクは下記の通りです。「sass」と「watch」というタスクを定義しています。「sass」は、「/_src/sass/」ディレクトリ配下の「.scss」という拡張子のファイルをコンパイルして、「css」というディレクトリに、CSSファイルを生成します。「watch」は、「scss」ファイルを監視して、ファイルに更新があれば自動的に「sass」タスクを実行して、Sassをコンパイルします。デフォルトタスクに「watch」を指定しています。['sass']);})gulp.task('default',['watch']);Gulpタスクの実行Gulpタスクを実行するには、gulpfile.jsのあるディレクトリに移動して、下記のコマンドを実行します。gulpこれで、Gulpのデフォルトタスクが実行されます。上記のgulpfile.jsでは、「watch」がデフォルトタスクでしたので、「watch」が実行されます。「sass」タスクを実行したい場合は、次のようにします。sass開発中は、「watch」タスクを実行しておくことで、SCSSファイルを保存するたびに、Sassがコンパイルされ、CSSファイルが生成されるようになります。フロントエンドエンジニアのための「Sass」講座。「Aire(アイレ)」とはスペイン語で「空気」を意味します。Aire(アル・アイレ)」と言えば、弦を弾いた指を隣の弦に触れずに空中に振り抜く奏法のこと。Project」です。Aboutフリーランスのフロントエンドエンジニアとして仕事をしています。http://aire-project.com/Categoriesフリーランス(16)ライフスタイル(12)写真(3)映画(1)演劇(5)音楽(2)養生(2)技術(18)CSS3(1)Nuxt.js(0)Sass(8)Vue.js(3)開発環境(6)書籍(10)雑記(5)このページではJavaScriptを使用しています。