【超簡単！】Sublime Text3にSCSSパッケージをインストールしてSassファイルをサクサク編集するまでの手順

Web2016年12月15日

Sublime Text3でSassファイル（.scss）を編集する際、SCSSパッケージをインストールしていないと以下のように編集はできるものの全てのテキストが真っ白で、秀丸などのテキストエディタで編集するのと変わりありません。

そこで、Sublime Text3にSCSSパッケージをインストールすることでSassファイルの編集環境を整えます。本記事ではSCSSパッケージをSublime Text3にインストールする方法をご紹介いたします。

• ※まだSublime Text3をインストールしていない場合は、以下の記事を参考にまずはSublime Text3のインストールを行ってください

• 【超簡単！】Sublime Text3（ポータブル版）のダウンロードから日本語化するまでの手順（Windows 7用）

Sublime Text3にSCSSパッケージをインストールする手順

メニューの[基本設定]-[Package Control]をクリックします。

ウインドウが表示されたら[ins]と入力し、[Package Control:Install Package]をクリックします。

続けて表示されたウインドウで[SCSS]と入力し、SCSSのパッケージをクリックします。

これでSCSSパッケージのインストールは完了です。
コードカラーリングがSassファイルの仕様になりました。もちろんコードヒントなども使えるようになっています。

まとめ

Sublime Text3にSCSSパッケージをインストールして開発を行うと、よりクオリティの高い設計を素早く行うことが可能となります。

SCSSパッケージ導入の際はぜひ本記事をご参考にしていただければ幸いです。

• 【何気に便利！】Webサイトで画像保存を禁止する方法についてまとめてみた
• トランプ新大統領をネタにしたと思われる言語設定「Secret.ɢoogle.com You are invited!～」をGoogleアナリティクスのフィルタで除外

この記事を読んでいる方にオススメの記事

• WebExcelで2つのセルの日付を比較して誤って過去日付が入力されていた場合、入力規則を使ってポップアップを表示する方法
• Web【静かでバッテリー持ちもグッド！】KASOTTのワイヤレスマウス「M207」についてレビュー
• WebNUROモバイルのSIMを快適に利用するためにWiFiルーター「HW-02E」を購入したのでレビュー
• WebGoogleアナリティクスにて変動IPアドレスからのアクセスを除外する方法
• Web【さよならFirebug】Firebugから開発者ツールに乗り換えた話
• Web【個人情報が気になる方へ】ゼロ幅スペース（ノーブレークスペース）でGmailの名前を非表示にする方法

「Web」の他の記事を読む

• ※承認制のため、即時には反映されません。