アサモンノデザイン

現役のデザイナーによるWebデザインに関する技術情報とカメラ・ガジェットに関する情報をお届けします

Social Navigation

【超簡単!】AtomでSass(SCSS)をコンパイルできるようにしてみた

フロントエンド

こんにちは、浅本です。

AtomでSassをコンパイルできるようにしたいと思い、即席で環境構築できましたので、ご紹介します。

今回はWindows10で検証しました。エディタはタイトルの通りAtomを使います。

導入手順


STEP1. nodeをインストール

公式サイトでダウンロードして、言われるがままに進めていくだけです。

https://nodejs.org/ja/

 

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください