Sublime Text3で『SASS/SCSS』をSyntax Highlightingする手順

  • 公開日:2018/12/04
  • 更新日:2018/12/04
  • 投稿者:n bit

Sublime Text3で『SASS/SCSS』をSyntax Highlightingする『Syntax Highlighting for Sass』の環境構築手順を解説しました。Sublime Text3で『SASS/SCSS』を使ったコーディング作業の生産性が向上します。

  • フロントエンド開発
  • css
  • Sublime Text

この記事は約 分で読めます。(文字)

Sass(SCSSファイル)をSyntax Highlightingする環境構築

Sass/Scssの記述をSyntax Highlightingすることでコーディングの作業がはかどります。今回はそのSyntax Highlightingを行うための環境を構築する方法の解説です。

私は普段SCSSファイル形式を利用するためSCSSファイルを基準に解説していますがSASSファイル形式でも全く同じ環境で利用できます。

Sublime Text3で『SASS/SCSS』をコンパイルする方法は下記のページで解説しています。

構築環境

今回SCSSファイルをSyntax Highlightingするための環境は以下の通りです。

エディタ

  • Sublime Text3

プラグイン

プラグインはInstall Packageからインストール可能

  • Syntax Highlighting for Sass

『Syntax Highlighting for Sass』はその名の通りSublime TextでSASS/SCSSファイルをSyntax Highlightingするためのプラグインです。

Syntax Highlighting for Sassのインストール

Sublime Textに『Syntax Highlighting for Sass』パッケージをインストールしていきます。

パッケージコントロールをインストール

パッケージコントロールをまだインストールしたことがない方は先にパッケージコントロールをインストールしておいてください。パッケージコントロールのインストール方法は下記のページで解説しています。

既にSublime Textへパッケージコントロールをインストール済みの方はこの次のセクションにお進みください。

Syntax Highlighting for Sassをインストール

パッケージコントロールのインストールが完了しましたらSCSSファイルをSyntax Highlightingするためのプラグイン『Syntax Highlighting for Sass』をインストールします。

『Command + Shift + P』でコマンドパレットを開き、『install』と入力してください。『install Package』がリストの中に表示されますので選択します。

Sublime Text 3 Package Control

インストールできるパッケージの一覧から『Syntax Highlighting for Sass』を検索し選択してください。

Syntax Highlighting for Sass インストール

正常にインストールが完了していれば

  • View > Syntax > Syntax Highlighting for Sass >Sass
  • View > Syntax > Syntax Highlighting for Sass >SCSS

の2項目が追加されています。

Syntax Highlighting for Sass 設定メニュー

今回は『SCSS』を選択しました。

SCSSをSyntax Highlighting

  • View > Syntax > Syntax Highlighting for Sass >SCSS

を選択した後に『SCSS』ファイルを開くと色分けされていなかった下記のような状態から

Syntax Highlighting for Sass インストール前

Syntax Highlightingされ下記画像のように見やすくなります。

Syntax Highlighting for Sass シンタックスハイライト状態

これでSCSSファイルをSyntax Highlightingするための環境構築は全て終了です。

今日のdot

1度Sublime Text3にSCSSファイルのSyntax Highlighting環境を作っておけば今後は自動的にSyntax Highlightingされます。生産性が変わるので早めに環境を作っておくのがお勧めです。

▲ ページの先頭へ戻る

このページの目次

目次