「Sass」&「Compass」のインストール方法まとめ(Mac OS X)
最終更新日: Update!!
ここ数年で注目を浴びてきているCSSの拡張メタ言語である「Sass」ですが、もう既に導入されている方も多いと思います。またSassには便利なツールも用意されており、そのうちフレームワークの一つである「Compass」なんかもよく知られています。
今回はこのSassとCompassのMacでのインストール方法についてまとめていきたいと思います。
Sassのインストール
まずはSassのインストールから行います。Sassはメタ言語であるためコンパイルが必要になります。.sassもしくは.scssファイルがコンパイルされることで.cssファイルが生成される仕組みです。 このコンパイルにはRubyが必要になるのでインストールしないといけないのですが、Macには標準でRubyが入っているので大丈夫です。 そしてコマンドラインでインストールしていきます。$ sudo gem install sass完了したらバージョンチェックでインストールされているかを確認します。Sassのバージョンが表示されればOKです。
$ sass -v
Compassのインストール
続いてCompassも同じようにコマンドラインでインストールしていきます。$ sudo gem install compassこちらも完了したらバージョンチェックでインストールされているかを確認します。Compassのバージョンが表示されればOKです。
$ compass -v下記のようなエラーが出る場合は、Apple Developersで「Command Line Tools」というものをインストールする必要があるようです。(あわせて事前にXcodeもインストールしておく必要があります)
〜 ERROR: Error installing compass: ERROR: Failed to build gem native extension. 〜このエラーには次のように対処していきます。
- 1. https://developer.apple.com/にアクセス
- 2. AppleIDとパスワードを入力してアカウントログイン
- 3. Download Toolsを選択
- 4. ページ下部のAdditional Toolsを選択
- 5. リストよりOSとXcodeの環境に対応するCommand Line Toolsを選択しインストールする
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories