ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2019-04-26

macにsass導入をする際の覚え書き

いつまでもcssで書いてる場合じゃ無いなーっと思い立ち、sassを導入しようとしたら、アレヤコレヤと時間がかかってしまったので、他のスタッフや今後の為にまとめて書き留めておきます。

最初のエラー

導入方法を調べてみると、たった1行!
とりあえずターミナルで入力してみましょう。これで使えるようになったらラッキー

sudo gem install sass

普段Rubyなどを使って無い人は、下記エラーが表示されると思います。

ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv2/v3 read server hello A: tlsv1 alert protocol version (https://rubygems.org/latest_specs.4.8.gz)


どうやらhttpsからダウンロードできないみたいなので、httpからダウンロードするように

gem source -a http://rubygems.org/

これでもう一度

sudo gem install sass

途中まで進行しますが、下記エラーが…

ERROR: Error installing sass:
rb-inotify requires Ruby version >= 2.2.

新しいRubyを入れる

どうやらMacに入ってるRubyのバージョンが古いみたいなので、確認してみると

ruby -v

ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]


はい、古いですね。
ということで、バージョン管理をしてくれるrbenvをインストールします。

brew install rbenv ruby-build

あとは、バージョンを調べて最新をインストール

rbenv install -l
rbenv install 2.6.3

さて、これで最新版がインストールできたと思って再度sassのインストールを試みるも…

sudo gem install sass

ERROR: Error installing sass:
rb-inotify requires Ruby version >= 2.2.


最新を入れたはずなのに、また同じエラーが表示されるので、バージョンを調べてみると

ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

変わってない…
インストールした最新版を読みに行くように

rbenv global 2.6.3

最後に

sudo gem install sass

これでやっとsassのインストールに成功しました。

普段からRuby使ってる人たちなら簡単な事かもしれませんが、フロントの人が気軽に導入してみようとすると混乱しちゃうと思います。

私もエラーの連続に泣きながら調べて見たのですが、たくさんの方が困ってるようだったので、この記事がお役に立てると良いなー。

苦労した甲斐あって、「もうcssで書くことは無いかなー」ってぐらいscssは快適です。

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素