2018/01/18少し前にWindowsのRubyでSassの環境を構築しました。Atomの環境も試してみることにしました。Atomは私が普段から使用しているエディタです。Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。ちなみに、今回構築した環境は以下の通りです。1.23.3Node.jsをインストールまずWindowsにNode.jsをインストールします。Features(最新版)」が表示されるので、安定版をダウンロードします。ダウンロードしたファイルを実行してインストールを実行します。インストールには特にオプションなど選択はありません。「次へ」で数分で完了します。コマンドプロンプトからNode.jsの動作を確認します。以下のコマンドを実行して、バージョン情報が表示されれば成功です。-vv8.9.4次にNode.jsのパッケージ管理コマンドであるnpmコマンドのバージョンを確認します。-v5.6.0node-sassをインストールnpmコマンドを使ってnode-sassをインストールします。634.22s外出先で実行したのでダウンロードに時間がかかったかな。5分ほどかかりました。以下のようにnode-sassコマンドでバージョンが確認できればインストール成功です。[C/C++]sass-autocompileをインストール&設定Atomに「sass-autocompile」をインストールします。Packages」から「sass-autocompile」を検索して、インストールを実行します。インストールが完了したら設定画面を開きます。Savescssファイルを保存すると同時にコンパイルしてくれます。今回の目的がこれなのでオンにします。filesコンパイル後のcssファイル名のルールです。デフォルトでは「$1.min.css」となっており「.min」が付加されますが、特に必要ないので「$1.css」とします。実際にsassを使ってみるそれでは実際にsassの自動コンパイル環境を使ってみます。ここで、インストールの一連の流れでnode-sassとsass-autocompileが関連付けされていない可能性があるため、一度Atomを再起動します。Atomを起動し、sample.scssファイルを新規作成し適当にsassを記述します。Sでファイルを保存すると、自動的にコンパイルされsample.cssが作成されました!成功です!ちなみにsassの記述に誤りがあると、エラーメッセージが表示されます。構文チェックも自動でやってくれるので、今後の作業効率がだいぶ上がりそうです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。