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にしかできない記述がたくさんありますので、ぜひ便利な記述方法なんかも覚えてみてください。
その辺はまた別の機会に紹介したいと思います。
では現場から以上です！
2740
