Web・デザイン

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

開発環境について

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

Rubyのインストール

  1. Windows
    WindowsでのインストールはRubyInstaller for Windowsより最新のバージョンをダウンロードして実行します。
    RubyInstaller 2.5.1-2 and 2.4.4-2 released (2018年8月現在)
  2. Mac Macでは「ruby」はインストールされています。

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

メニューに戻る

sassのインストール

  1. Windows
  2. Mac
メニューに戻る

Sassコマンド

メニューに戻る

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

Common Options
-I,
–load-path PATH
Sassインポートパスを指定します。
-r, –require LIBSassを実行する前にRubyライブラリが必要です。
–compassコンパスのインポートを利用可能にし、プロジェクトの設定を読み込みます。
-t, –style NAME出力スタイル。nested (default), compact, compressed, or expanded。
-?, -h, –helpヘルプメッセージを表示します。
-v, –versionSassのバージョン
Watching and Updating:
–watch変更のためにファイルまたはディレクトリを監視する。
生成されたCSSの場所は、コロンを使用して設定できます。
sass –watch input.sass:output.css
sass –watch input-dir:output-dir
–pollOSに頼るのではなく、手動でファイルの変更を確認してください。
– ウォッチにのみ意味があります。
–updateファイルやディレクトリをCSSにコンパイルします。
場所は–watchのように設定されます。
-f, –force CSSファイルが新しい場合でも、すべてのSassファイルを再コンパイルする。
–updateにのみ
–stop-on-errorファイルがコンパイルに失敗した場合は直ちに終了。
–watchと–updateにのみ意味があります。
Input and Output:
–scssCSSスーパーセットSCSS構文を使用します。
–sourcemap=TYPE生成された出力をソースファイルにリンクする方法。
auto(デフォルト):相対パス、または、URI
file:常に絶対ファイルのURI
inline:ソースマップ上のテキスト
none:ソースマップ出力しない
-s, –stdin入力ファイルの代わりに標準入力から入力を読み取ります。
入力ファイルが指定されていない場合のデフォルトです。
-E,
–default-encoding ENCODING
–unix-newlines
入力ファイルのデフォルトのエンコードを指定します。
書かれたファイルにはUnixスタイルの改行を使います。
Unixでは常に真です。
-g, –debug-infoFireSass 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コンパイル中に警告とステータスメッセージを消す。
メニューに戻る

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    WordPress jQuery + CSS + ショートコードで モーダル…
  2. Raspberry PI

    Raspberry Pi で DAC Volumioで高音質な音楽を再生する
  3. プログラミング

    WordPress にて jQueryUI テーマを動的選択してデザインを反映
  4. プログラミング

    python Anacondaを利用した開発環境の整備 jupter Noteb…
  5. サーバー環境

    Laravel インストールメモ
PAGE TOP