SassとはCSSのメタ言語で、コーディングの効率化やプロジェクト型の開発に役立つことから、Web制作、Webシステムのフロントエンド開発で採用している人は多いと思います。また、CompassはSassにて効率よく開発するためのオーサリングフレームワークであり、ベンダープレフィックスを自動で追加してくれる機能など、便利な拡張機能がたくさんセットされています。
今回は、SassまたCompassをmacOX（10.14 Mojave）で環境構築するまでの手順を備忘録としてまとめてみました。
目次
- Xcodeのインストール
- Sassのインストール
- Compassのインストール
- まとめ
1. Xcodeのインストール
Sassはプログラミング言語の「Ruby」で実装されており、Sassを使用するにはRuby環境が必要です。macOSの場合、Xcodeの「Command Line Tools」をインストールしてしまうのが一番手っ取り早いと思うので、まずはそのインストールから行ないます。
App Storeを起動して「Xcode」をインストールします。App Storeが起動したら検索バーに「xcode」と入力します。見つけられたら「入手」しましょう。
インストールが完了したら、Xcodeを実際に起動してみてください。最初に同意事項が表示されますので、その内容に「同意」します。インストールしただけだと必要なコンポーネントが実際には使えないので、必ず「同意」が必要になります。
確認方法ですが、Xcodeを起動して「Xcode」メニューの「Preferences」を選択後、「Locations」画面内の「Command Line Tools」にバージョンが表示されていればインストール成功です。下記のキャプチャでは「Xcode 10.1(10B61)」がインストールされている事になっています。
2. Sassのインストール
ターミナルを起動して、下記のコマンドを実行します。
$ sudo gem install sass
もし下記のようなエラーが表示されるようなら…
Building native extensions. This could take a while…
Successfully installed ffi-1.10.0
Successfully installed rb-inotify-0.10.0
Successfully installed sass-listen-4.0.0
ERROR: While executing gem … (Gem::FilePermissionError)
You don’t have write permissions for the /usr/bin directory.
インストール先を変更してください。
$ sudo gem install -n /usr/local/bin sass
El Capitanからrootlessという概念が登場したそうで、root権限を持つユーザーでも特定ディレクトリへのインストールができなくなってしまったらしいのです。
下記のようなステータスとなったらインストール成功です。
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
primary implementation: https://sass-lang.com/install
* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
sassc gem: https://github.com/sass/sassc-ruby#readme
* For more details, please refer to the Sass blog:
http://sass.logdown.com/posts/7081811
Successfully installed sass-3.7.3
Parsing documentation for sass-3.7.3
Installing ri documentation for sass-3.7.3
Done installing documentation for sass after 6 seconds
1 gem installed
バージョンを確認してみましょう。
$ sass -v
Ruby Sass 3.7.3
3. Compassのインストール
次いで、Compassのインストールです。引き続き、ターミナルから下記コマンドを実行します。
$ sudo gem install -n /usr/local/bin compass
Fetching compass-core-1.0.3.gem
Fetching multi_json-1.13.1.gem
Fetching sass-3.4.25.gem
Fetching compass-import-once-1.0.5.gem
Fetching chunky_png-1.3.11.gem
Fetching compass-1.0.3.gem
Successfully installed sass-3.4.25
Successfully installed multi_json-1.13.1
Successfully installed compass-core-1.0.3
Successfully installed compass-import-once-1.0.5
Successfully installed chunky_png-1.3.11
Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
Successfully installed compass-1.0.3
Parsing documentation for sass-3.4.25
Installing ri documentation for sass-3.4.25
Parsing documentation for multi_json-1.13.1
Installing ri documentation for multi_json-1.13.1
Parsing documentation for compass-core-1.0.3
Installing ri documentation for compass-core-1.0.3
Parsing documentation for compass-import-once-1.0.5
Installing ri documentation for compass-import-once-1.0.5
Parsing documentation for chunky_png-1.3.11
Installing ri documentation for chunky_png-1.3.11
Parsing documentation for compass-1.0.3
Installing ri documentation for compass-1.0.3
Done installing documentation for sass, multi_json, compass-core, compass-import-once, chunky_png, compass after 11 seconds
6 gems installed
上記のようなステータスが表示されたら、インストールは完了です。バージョンを確認してみましょう。
$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2019 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
これでCompassもインストールできました！
4. まとめ
htmlのコーディングも多種多様な方法がありますが、Sass及びCompassを使ったコーディングは、効率よくhtml及びcssのコーディングが行えるため、わたしはよく使っています。今回は備忘録も兼ねて環境構築方法をまとめてみました。
macOSの場合、「Command Line Tools」のインストールが必要だったり、gemでSaasをインストールする時に「/usr/local/bin」内にインストールする必要があったりと、若干注意点があるので注意しましょう。