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. Web・デザイン

    CSS3 アニメーションライブラリ animate.cssについて学ぶ
  2. プログラミング

    CentoOS7 python3 CGI Mysqlデータベースを扱う
  3. プログラミング

    python Django Webアプリケーションの構築 基本編
  4. サーバー環境

    無料SSL証明書 Let’s Encrypt でワイルドカードな証明…
  5. Raspberry PI

    RaspberyPi 4B によるローカルネットワークドライブ、共有フォルダーを…
PAGE TOP