• HOME
  • SOFTWARE
  • [Windows版]Sublime Text+CompassでSassをコンパイルする為の設定方法

2020/05/01 1:39

[Windows版]Sublime Text+CompassでSassをコンパイルする為の設定方法

CSSしか使ってない方がまだまだ多いと聞きます。

せっかくなので「Sass」使ってみませんか?

記述が楽になるのでオススメです。

今回はSublime Text内でSass→CSSへとコンパイルする設定方法の解説です。

 

ちなみに今回のはRubySassですが、もしDartSassをSublimeでコンパイルする方法はコチラから。

(DartSassの方が推奨となってる模様)

 

必要なものをインストールする

 

まずは必要となるツールのインストールです。

 

 

①Sublime Text

 

これは2や3等のバージョンがいろいろあると思いますが恐らく最新でも大丈夫だと思います。

 

Sublime Text公式 : https://www.sublimetext.com/

 

 

②Package Controlを入れる

 

まず、Package ControlというものをSublime Text内にインストールする必要があります。

 

詳細はコチラ : https://packagecontrol.io/installation

 

1.

Sublime Textを起動させる

ctrl+shift+pでコマンドパレットを開く

 

2.

Install Package Controlと入力しエンター

 

 

③プラグインを入れる

 

1.

上記と同様に

ctrl+shift+pでコマンドパレットを開く

 

2.

Package Control: Install Packageを入力

 

3.

下記を1つずつ入れてインストールを繰り返す

(Sassを使うにあたってオススメのプラグインです)

sass

sass snippets

scss

scss snippets

compass

emmet

 

※「compass」は重要です。

 

 

④Rubyのインストール

 

Macの場合は元々入ってるかと思いますが

Windowsの場合は「Ruby」のインストールが必要です。

 

Ruby公式 : https://www.ruby-lang.org/ja/

 

 

コンパイル設定

 

では準備ができましたのでscssファイルをcssにコンパイルする為の設定をします。

 

まずは任意の場所にプロジェクトのルートフォルダを作りましょう。

 

 

作成したルートに「config.rb」という名前のファイルを作ります。

 

【config.rb】

http_path = "/"

css_dir = "css"

sass_dir = "sass"

 

output_style = :expanded

line_comments = false

 

 

ルートに「css」「sass」フォルダを作成しておく。

上記で設定した通り、プロジェクトのルート上に同じ名前のフォルダを作っておきます。

 

 

実行

 

ではsassフォルダ内に「〇〇.scss」というsassファイルを作って何か適当にsassの記述を書いてみましょう。

 

 

そして「ctrl+b」でビルド実行する事でscssがコンパイルされCSSファイルが出力されます。

 

ちなみにscssファイルをもし複数作る時は頭に「_」アンダースコアを付けて「_〇〇.scss」という形にする事でそのファイルのコンパイルを無視する事ができます。

 

つまり「_aaa.scss」と「_bbb.scss」と「_ccc.scss」という3つのファイルを使うとして、「style.scss」というファイルを別で作っておきます。

 

下記のように「style.scss」に記述する事で、3枚のファイルをインポートして読み込ませておきます。

 

【style.scss】

@charset "UTF-8";

@import "_aaa.scss";

@import "_bbb.scss";

@import "_ccc.scss";

 

こうしておけば「style.scss」のまとめられた1枚をコンパイルするのみでOKとなります。

 

 

まとめ

 

もし何か挙動がおかしい場合は

Tool > Build System > Compass

とかにしてみるといいかもです。

 

インストールするものが多いですが最初だけです。

後は快適なsassライフが待ってます。

それ以前にSublime Textが無料の割に使いやすくて重宝しますね。

 

さらにsassにしかできない記述がたくさんありますので、ぜひ便利な記述方法なんかも覚えてみてください。

その辺はまた別の機会に紹介したいと思います。

 

 

では現場から以上です!

2545