Ruby Sass のインストール開発環境の整備

萩原賢二のコーディングストック > Web・デザイン > Ruby Sass のインストール開発環境の整備

Web・デザイン

2018.08.9

開発環境について

ruby sass での開発
Sassをインストールするには　Rubyが必要となります。　Windows環境とMac環境ではそれぞれインストール方法が異なります。ここでそれをインストールした時の記録をまとめておきました。
sassをコンパイルできるアプリケーション
sass公式ページのinstallにsassをコンパイルできるアプリケーションとしていくつかアプリが紹介されています。
sassをコンパイル、動作確認できるWebアプリケーションとして
SassMeister | The Sass Playground!があります。
「DreamWeaver CC」　では　Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整うとのことです。
またテキストエディター達、sublime、Brakets,coda2 他でもコンパイル出来るアドインがあり、簡単にインストールでき、また、別途　「ruby sass」をインストールするのが必要な場合が多いようです。

Rubyのインストール、確認
sassのインストール
sassコマンドの利用例
sassコマンドオプション一覧

Rubyのインストール

Windows
WindowsでのインストールはRubyInstaller for Windowsより最新のバージョンをダウンロードして実行します。
RubyInstaller 2.5.1-2 and 2.4.4-2 released　（2018年８月現在)

Mac Macでは「ruby」はインストールされています。

参考に「ruby」を独自に他のバージョンにインストールしたりしてバージョン管理したい場合は「ruby」の管理用ツールのひとつである「rbenv」で管理可能であるので紹介しておきます。

// homebrew のインストール
MyMac:~ hagiwara$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// homebrew のバージョン確認
MyMac:~ hagiwara$ MyMac:~ hagiwara$ brew --version
Homebrew 1.6.9
Homebrew/homebrew-core (git revision 2c6ae6; last commit 2018-06-20)
MyMac:~ hagiwara$ brew update		// homebrew アップデート
MyMac:~ hagiwara$ brew upgrade		// 更新のあるformulaを再ビルドする


MyMac:~ hagiwara$ brew install rbenv ruby-build			// rbenvのインストール ※注
MyMac:~ hagiwara$ rbenv --version						// バージョン確認
MyMac:~ hagiwara$ rbenv install -l						// 利用可能なrubyのリストを確認
MyMac:~ hagiwara$ rbenv install <version>				// 特定のバージョンのインストール

MyMac:~ hagiwara$ rbenv versions						// インストールされたrubyのバージョンを選択
  system
* 2.3.0 (set by /Users/khagiwara/.rbenv/version)
  2.4.0
  2.4.4
  2.5.1 
MyMac:~ hagiwara$ rbenv global 2.4.4			// 例として ruby 2.4.4 を選択
MyMac:~ hagiwara$ ruby -v
ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]

// 注：　
// brew でインストールする時システム構築で利用するtmpフォルダー等に権限で問題でエラーば出る場合があります。
// Error: parent directory is world writable but not sticky
// Please report this bug:
// 以下のコマンドにてフォルダーの権限を修正後再度インストール実行
MyMac:~ hagiwara$ sudo chmod +t /private/tmp
MyMac:~ hagiwara$ sudo chmod +t ~/Library/Caches/Homebrew

// homebrew のインストール

MyMac:~ hagiwara$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// homebrew のバージョン確認

MyMac:~ hagiwara$ MyMac:~ hagiwara$ brew --version

Homebrew 1.6.9

Homebrew/homebrew-core (git revision 2c6ae6; last commit 2018-06-20)

MyMac:~ hagiwara$ brew update // homebrew アップデート

MyMac:~ hagiwara$ brew upgrade // 更新のあるformulaを再ビルドする

MyMac:~ hagiwara$ brew install rbenv ruby-build // rbenvのインストール ※注

MyMac:~ hagiwara$ rbenv --version // バージョン確認

MyMac:~ hagiwara$ rbenv install -l // 利用可能なrubyのリストを確認

MyMac:~ hagiwara$ rbenv install <version> // 特定のバージョンのインストール

MyMac:~ hagiwara$ rbenv versions // インストールされたrubyのバージョンを選択

system

* 2.3.0 (set by /Users/khagiwara/.rbenv/version)

2.4.0

2.4.4

2.5.1

MyMac:~ hagiwara$ rbenv global 2.4.4 // 例として ruby 2.4.4 を選択

MyMac:~ hagiwara$ ruby -v

ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]

// 注：　

// brew でインストールする時システム構築で利用するtmpフォルダー等に権限で問題でエラーば出る場合があります。

// Error: parent directory is world writable but not sticky

// Please report this bug:

// 以下のコマンドにてフォルダーの権限を修正後再度インストール実行

MyMac:~ hagiwara$ sudo chmod +t /private/tmp

MyMac:~ hagiwara$ sudo chmod +t ~/Library/Caches/Homebrew

メニューに戻る

sassのインストール

Windows

C:>ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]

C:>gem -v
2.7.6

>gem install sass
Fetching: rb-fsevent-0.10.3.gem (100%)
Successfully installed rb-fsevent-0.10.3
    ・
    ・
    ・
Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 11 seconds
5 gems installed

C:>sass -v
Ruby Sass 3.5.7

C:>ruby -v

ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]

C:>gem -v

2.7.6

>gem install sass

Fetching: rb-fsevent-0.10.3.gem (100%)

Successfully installed rb-fsevent-0.10.3

・

Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 11 seconds

5 gems installed

C:>sass -v

Ruby Sass 3.5.7

Mac

MyMac:~ hagiwara$ ruby -v
ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]
MyMac:~ hagiwara$ gem -v
2.6.14.1

MyMac:~ hagiwara$ sudo gem install sass
Fetching: rb-fsevent-0.10.3.gem (100%)
Successfully installed rb-fsevent-0.10.3
    ・
    ・
    ・

Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 33 seconds
5 gems installed
MyMac:~ hagiwara$ sass -v
Ruby Sass 3.5.7

MyMac:~ hagiwara$ ruby -v

ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]

MyMac:~ hagiwara$ gem -v

2.6.14.1

MyMac:~ hagiwara$ sudo gem install sass

Fetching: rb-fsevent-0.10.3.gem (100%)

Successfully installed rb-fsevent-0.10.3

・

Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 33 seconds

5 gems installed

MyMac:~ hagiwara$ sass -v

Ruby Sass 3.5.7

メニューに戻る

Sassコマンド

// sassコマンド
sass [options] [INPUT]:[OUTPUT]

// コンパイル例
sass -watch -style expanded style.scss:style.css
// sass形式で書かれたファイルstyle.scss　を　-watchオプションが変更を検知しています。
// -watchオプションはデーモンで起動されています。
// style.cssファイルにcss形式で出力します。
// 出力タイプは expanded

----------------------------------
出力タイプ
Nested:	Sassの階層構造 (インデント) を残す。
Expanded:ルールセットとプロパティを1行ずつ改行。一般的なCSSの書き方。
Compact:セレクタとプロパティが1行で記述される. ルールセットごとに改行が入る。
Compressed:圧縮する。インデントや改行コメントはすべて削除される。
           （例外として　, /*！ではじまるコメントは削除されない)

// sassコマンド

sass [options] [INPUT]:[OUTPUT]

// コンパイル例

sass -watch -style expanded style.scss:style.css

// sass形式で書かれたファイルstyle.scss　を　-watchオプションが変更を検知しています。

// -watchオプションはデーモンで起動されています。

// style.cssファイルにcss形式で出力します。

// 出力タイプは expanded

----------------------------------

出力タイプ

Nested: Sassの階層構造 (インデント) を残す。

Expanded:ルールセットとプロパティを1行ずつ改行。一般的なCSSの書き方。

Compact:セレクタとプロパティが1行で記述される. ルールセットごとに改行が入る。

Compressed:圧縮する。インデントや改行コメントはすべて削除される。

（例外として　, /*！ではじまるコメントは削除されない)

メニューに戻る

Sass オプション一覧 (Ruby Sass 3.5.7)

Common Options
-I, –load-path PATH	Sassインポートパスを指定します。
-r, –require LIB	Sassを実行する前にRubyライブラリが必要です。
–compass	コンパスのインポートを利用可能にし、プロジェクトの設定を読み込みます。
-t, –style NAME	出力スタイル。nested (default), compact, compressed, or expanded。
-?, -h, –help	ヘルプメッセージを表示します。
-v, –version	Sassのバージョン
Watching and Updating:
–watch	変更のためにファイルまたはディレクトリを監視する。生成されたCSSの場所は、コロンを使用して設定できます。 sass –watch input.sass：output.css sass –watch input-dir：output-dir
–poll	OSに頼るのではなく、手動でファイルの変更を確認してください。 – ウォッチにのみ意味があります。
–update	ファイルやディレクトリをCSSにコンパイルします。場所は–watchのように設定されます。
-f, –force	CSSファイルが新しい場合でも、すべてのSassファイルを再コンパイルする。 –updateにのみ
–stop-on-error	ファイルがコンパイルに失敗した場合は直ちに終了。 –watchと–updateにのみ意味があります。
Input and Output:
–scss	CSSスーパーセットSCSS構文を使用します。
–sourcemap=TYPE	生成された出力をソースファイルにリンクする方法。 auto（デフォルト）：相対パス、または、URI file:常に絶対ファイルのURI inline:ソースマップ上のテキスト none：ソースマップ出力しない
-s, –stdin	入力ファイルの代わりに標準入力から入力を読み取ります。入力ファイルが指定されていない場合のデフォルトです。
-E, –default-encoding ENCODING –unix-newlines	入力ファイルのデフォルトのエンコードを指定します。書かれたファイルにはUnixスタイルの改行を使います。 Unixでは常に真です。
-g, –debug-info	FireSass Firebugプラグインで使用できる出力を出力します。
-l, –line-numbers –line-comments	生成されたCSSに、対応するソース行を示すコメントを出力します。
Miscellaneous:
-i, –interactive	対話形式でSassScriptシェルを実行。
-c, –check –precision NUMBER_OF_DIGITS –cache-location PATH	構文をチェックしない 10進数を出力するときに使用する精度の桁数。デフォルトは10です。解析されたSassファイルを保存するパス。デフォルトは.sass-cacheです。
-C, –no-cache –trace	解析されたSassファイルはキャッシュしない。エラー時に完全なRubyスタックトレースを表示する。
-q, –quiet	コンパイル中に警告とステータスメッセージを消す。