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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. Raspberry PI

    raspberryPi 4B CenotOS7 をインストール LAMP環境を…
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備

    サーバー環境

    ubuntu 20.04 nginx php mysql Webサーバー環境…
  3. サーバー環境

    Vagrant ローカル環境構築 centos7
  4. プログラミング

    Emmet CheatSheet 省略記法まとめ
  5. サーバー環境

    centos7 に Node Version Manager(nvm)で nod…
PAGE TOP