Sass & Compass 環境の構築
macOS プラットフォームで Sass + Compass 環境を作る手順です。
コーディングは恋に落ちるエディタ Sublime Text 3 、コンパイルは macOS 標準のターミナルで行います。
1. Xcode とコマンドラインツールのインストール
インストールしていないと gem がコケたりします。
macOS 12 Monterey は Xcode 13 以降でないと動きません。
転ばぬ先の杖。
2. Sass + Compass のインストール
ターミナルで行います。そんなに難しくない。
まず Ruby Gems をアップデートしましょう。
/usr/local/bin をインストール先に指定して行います。
sudo gem update --system -n /usr/local/bin次に Sass と Compass をインストールします。
macOS 11 Big Sur 以降は Listen も入れてください。
sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass
sudo gem install -n /usr/local/bin listengem install でパーミッションエラーになったときは、このまま続行しても解決しません。
原因は利用しているのが System の Ruby のため権限不足となるからです。
これには当たる時とハズれる時があって、ハズレのときはもうずっとこのままなので、「 Homebrew で ruby をセットアップする」を参照し、rbenv 管理下に ruby をインストールし直してください。
3. Sublime-Text のセットアップ
- www.sublimetext.com から本体をダウンロードします。
- Sublime Text を起動し、「 Tools 」 > 「 Install Package Control 」を選び、Package Control をインストールします。
- 続いて「 Sublime Text 」>「 Preferences 」>「 Package Control 」と選んで Package Control を開きます。
- Package Control: Install Package を検索し「 Sass 」「 SASS Build 」「 SCSS 」「 SCSS Snippets 」「 Compass 」をインストールして完了。
4. Compassの使い方
Compass フォルダと config.rb を作っておくこと。
ターミナルで Compass フォルダを cd しておいて compass watch を実行するだけです。
監視モードになり、scss ファイルが更新されると自動的に css へコンパイルされます。
デバッグサポートの修正
ブラウザサポートチェックの設定ファイルの文法が微妙に引っかかって、コンパイルするんだけど警告が出る、みたいな気持ち悪い動作があります。以下の設定ファイルの 85 行目以降を修正してください。
Macintosh HD > Libraries > Ruby > Gems > 2.6.0 > gems > compass-core-1.0.3 > stylesheets > compass > css3 > _deprecated-support.scssrbenv 管理下の ruby を利用している場合は以下のファイルが対象です。
Macintosh HD > Users > Username > .rbenv > versions > 3.1.0 > lib > ruby > gems > 3.1.0 > gems > compass-core-1.0.3 > stylesheets > compass > css3 > _deprecated-support.scss修正前
// A debug tool for checking browser support
@mixin debug-support-matrix($experimental: true, $ie: true) {
@debug #{'$moz-'}$experimental-support-for-mozilla
#{'$webkit-'}$experimental-support-for-webkit
#{'$opera-'}$experimental-support-for-opera
#{'$microsoft-'}$experimental-support-for-microsoft
#{'$khtml-'}$experimental-support-for-khtml;
@debug #{'$ie6-'}$legacy-support-for-ie6
#{'$ie7-'}$legacy-support-for-ie7
#{'$ie8-'}$legacy-support-for-ie8;
}修正後
// A debug tool for checking browser support
@mixin debug-support-matrix($experimental: true, $ie: true) {
@debug '#{"$moz-"}$experimental-support-for-mozilla'
'#{"$webkit-"}$experimental-support-for-webkit'
'#{"$opera-"}$experimental-support-for-opera'
'#{"$microsoft-"}$experimental-support-for-microsoft'
'#{"$khtml-"}$experimental-support-for-khtml';
@debug '#{"$ie6-"}$legacy-support-for-ie6'
'#{"$ie7-"}$legacy-support-for-ie7'
'#{"$ie8-"}$legacy-support-for-ie8';
}