RubyGemsでSASSとCompassとSASS版Bootstrapをインストールする方法

6824 ワード
Sass Bootstrap3 CSS3 Compass CSS3 テキストリンク

環境

  • OS : macOS Sierra version10.12.5 64bit
  • RubyGems : 2.6.12

インストールするもの

  • SASS : 3.4.24 (Selective Steve)
  • Compass : 1.0.3 (Polaris)
  • Bootstrap : bootstrap-sass-3.3.7

RubyGemsを最新化する

$ sudo gem install rubygems-update
Password:
Fetching: rubygems-update-2.6.12.gem (100%)
Successfully installed rubygems-update-2.6.12
Parsing documentation for rubygems-update-2.6.12
Installing ri documentation for rubygems-update-2.6.12
1 gem installed
$ sudo update_rubygems
Password:
RubyGems 2.6.12 installed
Parsing documentation for rubygems-2.6.12
Installing ri documentation for rubygems-2.6.12

=== 2.6.12 / 2017-04-30

Bug fixes:
<省略>
RubyGems installed the following executables:
    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/gem

Ruby Interactive (ri) documentation was installed. ri is kind of like man 
pages for ruby libraries. You may access it like this:
  ri Classname
  ri Classname.class_method
  ri Classname#instance_method
If you do not wish to install this documentation in the future, use the
--no-document flag, or set it as the default in your ~/.gemrc file. See
'gem help env' for details.

$ gem -v
2.6.12

インストール済みのgemを確認する

$ sudo gem list

*** LOCAL GEMS ***

bigdecimal (default: 1.2.0)
CFPropertyList (2.2.8)
chunky_png (1.3.6)
ffi (1.9.14)
io-console (default: 0.4.2)
json (default: 1.7.7)
libxml-ruby (2.6.0)
minitest (default: 4.3.2)
multi_json (1.12.1)
nokogiri (1.5.6)
psych (default: 2.0.0)
rake (default: 0.9.6)
rb-fsevent (0.9.7)
rb-inotify (0.9.7)
rdoc (default: 4.0.0)
rubygems-update (2.6.12, 2.6.6)
sqlite3 (1.3.7)
test-unit (default: 2.0.0.0)

RubyGemsでSASSとCompassをインストールする

　

ここで $ sudo gem install compass によりCompassだけではなくSASSもインストールされます。

$ sudo gem install compass
Fetching: sass-3.4.24.gem (100%)
Successfully installed sass-3.4.24
Fetching: compass-core-1.0.3.gem (100%)
Successfully installed compass-core-1.0.3
Fetching: compass-import-once-1.0.5.gem (100%)
Successfully installed compass-import-once-1.0.5
Fetching: compass-1.0.3.gem (100%)
    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.24
Installing ri documentation for sass-3.4.24
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 compass-1.0.3
Installing ri documentation for compass-1.0.3
4 gems installed
$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2017 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
$ sass -v
Sass 3.4.24 (Selective Steve)

RubyGemsでBootstrapをインストールする

$ sudo gem install bootstrap-sass
Fetching: execjs-2.7.0.gem (100%)
Successfully installed execjs-2.7.0
Fetching: autoprefixer-rails-7.1.1.2.gem (100%)
Successfully installed autoprefixer-rails-7.1.1.2
Fetching: bootstrap-sass-3.3.7.gem (100%)
Successfully installed bootstrap-sass-3.3.7
Parsing documentation for execjs-2.7.0
Installing ri documentation for execjs-2.7.0
Parsing documentation for autoprefixer-rails-7.1.1.2
Installing ri documentation for autoprefixer-rails-7.1.1.2
Parsing documentation for bootstrap-sass-3.3.7
Installing ri documentation for bootstrap-sass-3.3.7
3 gems installed

知っている人には当たり前、けれど知らなかったこと

インストールするgemに必要なものは一緒にインストールされる

はじめに
1. $ sudo gem install sass
2. $ sudo gem install compass
3. $ sudo gem install bootstrap-sass
とインストールしました。

いろんなサイト様を見ていて思いました。
Compassをインストールする時に$ sudo gem install sassはしないなぁ・・・なぜ？

なんだかんだ10回くらいgem installとgem uninstallを繰り返して
$ sudo gem install sass は $ sudo gem install compass をすれば不要だとやっと気が付きました・・・

$ sudo gem install compass
Fetching: sass-3.4.24.gem (100%)
Successfully installed sass-3.4.24<----------- SASSがインストールされていた！