開発環境について
- 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のインストール
- Windows
WindowsでのインストールはRubyInstaller for Windowsより最新のバージョンをダウンロードして実行します。
RubyInstaller 2.5.1-2 and 2.4.4-2 released （2018年８月現在) - Mac
Macでは「ruby」はインストールされています。
参考に「ruby」を独自に他のバージョンにインストールしたりしてバージョン管理したい場合は「ruby」の管理用ツールのひとつである「rbenv」で管理可能であるので紹介しておきます。
123456789101112131415161718192021222324252627282930313233// homebrew のインストールMyMac:~ hagiwara$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"// homebrew のバージョン確認MyMac:~ hagiwara$ MyMac:~ hagiwara$ brew --versionHomebrew 1.6.9Homebrew/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.02.4.42.5.1MyMac:~ hagiwara$ rbenv global 2.4.4 // 例として ruby 2.4.4 を選択MyMac:~ hagiwara$ ruby -vruby 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/tmpMyMac:~ hagiwara$ sudo chmod +t ~/Library/Caches/Homebrew
sassのインストール
- Windows
1234567891011121314151617C:>ruby -vruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]C:>gem -v2.7.6>gem install sassFetching: 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 seconds5 gems installedC:>sass -vRuby Sass 3.5.7
- Mac
12345678910111213141516MyMac:~ hagiwara$ ruby -vruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]MyMac:~ hagiwara$ gem -v2.6.14.1MyMac:~ hagiwara$ sudo gem install sassFetching: 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 seconds5 gems installedMyMac:~ hagiwara$ sass -vRuby Sass 3.5.7
Sassコマンド
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 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 | コンパイル中に警告とステータスメッセージを消す。 |