【超簡単！】AtomでSass（SCSS）をコンパイルできるようにしてみた
こんにちは、浅本です。
AtomでSassをコンパイルできるようにしたいと思い、即席で環境構築できましたので、ご紹介します。
今回はWindows10で検証しました。エディタはタイトルの通りAtomを使います。
導入手順
STEP1. nodeをインストール
公式サイトでダウンロードして、言われるがままに進めていくだけです。
STEP2. nodeがインストール出来たか確認
コマンドプロンプトを開いて、node -v と入力をして確認します。
v8.9.4
と表示されたら問題ありません。数字の部分はバージョンなので違っていても問題ありません。
STEP3. node-sassをインストール
コマンドプロンプトを開いて、npm install -g node-sass と入力し、Enterを押下します。
そうするとインストールしている感じの表示がされるはずです。
STEP4. node-sassがインストール出来たか確認
コマンドプロンプトで node-sass -v と入力して、Enterを押下。
node-sass 4.8.3 (Wrapper) [JavaScript]
libsass 3.5.2 (Sass Compiler) [C/C++]
と表示されたら問題ありません。数字の部分はバージョンなので違っていても問題ありません。
STEP5. Atomのパッケージ sass-autocompileをインストール
Atomを開いてパッケージインストールのところへ移動しましょう。
sass-autocompile と検索します。その際に一番上に出てきたものをインストールしてください。
セッティングも出来ますが、特に何もしなくても大丈夫です。
STEP6. Sassがコンパイルされることを確認
Atomで common.scss などSass(SCSS)のファイルを作成してください。
保存をした際に自動でコンパイルが走って、common.min.css が同じディレクトリ内に生成されます。
まとめ
このようにAtomでSassをコンパイルできる環境を作るのは非常に簡単です。
スタイルを書くときは、Sass(SCSS)ファイルで書いて、HTMLやPHPなどでの読み込みはコンパイルされたCSSファイルを読み込めばそれでOKです。
Sassを使うことで、コーディングを爆速化出来るので、まだトライしていない方は是非トライしてみてください！
Comments