Sass の使用 (Sass の使用) - プラグイン、キャッシュ、構成オプション、構文の選択、エンコーディング format_html/css_WEB-ITnose

公式ドキュメントからの翻訳: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Sass は 3 つの方法で使用できます。コマンド ライン ツール、スタンドアロンの Ruby モジュールとして、または Ruby on Rails や Merb などの Rack 対応フレームワークのプラグインとして。どちらの方法でも、最初に Sass gem をインストールする必要があります:

gem install sass

Windows を使用している場合は、最初に Ruby をインストールする必要がある場合があります。

コマンドラインで Sass を実行したい場合は、

sass input.scss output.css

を使用してください。また、Sass コマンドを使用して Sass ファイルへの変更を監視し、自動的にコンパイルして CSS を更新することもできます。

sass --watch input.scss:output.css

ディレクトリに多数の Sass ファイルがある場合は、Sass コマンドを使用してディレクトリ全体を監視することもできます。

sass --watch app/sass:public/stylesheets

sass --help を使用して、完全なファイルをリストします。ヘルプドキュメント。

Ruby で Sass を使用することも非常に簡単です。Sass gem をインストールしたら、それを使用して require "sass" を実行し、次のように Sass::Engine を使用します。 🎜>Rack /Rails/Merb Plugin

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)engine.render #=> "#main { background-color: #0000ff; }\n"

Rails 3 より前のバージョンで Sass を有効にするには、environment.rb ファイルにコード行を追加する必要があります:

Rails の場合3、次の行を Gemfile に追加します:

config.gem "sass"

Merb で Sass を有効にするには、config/dependency.rb ファイルにコード行を追加します:

gem "sass"

In Rack アプリケーション Sass を有効にするには、次のコードを config.ru ファイルに追加する必要があります:

dependency "merb-haml"

Sass スタイル シートはビューとは異なります。 動的コンテンツは含まれていないため、Sass ファイルが更新されたときに CSS を生成するだけで済みます。 デフォルトでは、.sass および .scss ファイルは public/stylesheets/sass ディレクトリに配置されます (これはオプションで設定できます)。 その後、必要に応じて、対応する CSS ファイルにコンパイルされ、public/stylesheets ディレクトリに配置されます。 たとえば、ファイル public/stylesheets/sass/main.scss は、ファイル public/stylesheets/main.css にコンパイルされます。

require 'sass/plugin/rack'use Sass::Plugin::Rack

キャッシュ

デフォルトでは、Sass はコンパイルされたテンプレート (テンプレート) を自動的にキャッシュします。これにより、Sass テンプレートを処理する際の効果が特に顕著になります。複数のファイルをインポートして 1 つの大きなファイルを形成する場合。

フレームワークが使用されていない場合、Sass はキャッシュされたテンプレートを .sass-cache ディレクトリに置きます。 Rails と Merb では、キャッシュされたテンプレートは tmp/sass-cache ディレクトリに配置されます。 このディレクトリはオプションでカスタマイズできます。 Sass でキャッシュを有効にしたくない場合は、このオプションを false に設定できます。

設定オプション (Options)

オプションは Sass::Plugin#optionsshash を通じて設定でき、具体的には Rails のenvironment.rb または Rack の config.ru ファイルで設定できます。

あるいは、Merb を使用している場合は、init.rb ファイルに Merb::Plugin.config[:sass] ハッシュを設定できます:

Sass::Plugin.options[:style] = :compact

またはオプション ハッシュを Sass::Engine#initialize に渡します。

Merb::Plugin.config[:sass][:style] = :compact

関連するすべてのオプションは、マーカーを介して sass および scss コマンド ライン実行可能ファイルでも使用できます。利用可能なオプションは次のとおりです:

オプション	説明
:style	出力 CSS のコード スタイルを設定します。表示できます。 。
:syntax	入力ファイルの構文。:sass はインデントされた構文を意味し、:scss は CSS 拡張構文を意味します。 Sass::Engine インスタンスを自分で構築する場合にのみ役立ちます。Sass::Plugin を使用すると、正しい値が自動的に設定されます。デフォルト設定は:sass です。
:property_syntax	インデント構文ドキュメントでプロパティ構文を使用するように強制します。正しい構文が使用されていない場合、エラーがスローされます。 :new 値は、プロパティ名の後にコロンを強制的に使用することを意味します。例: カラー: #0f3 または幅: $main_width。 :old 値は、属性名の前にコロンを強制することを意味します。例::color #0f3 または :width $main_width。デフォルトでは、両方の構文が有効です。このオプションは、SCSS (.scss) ドキュメントには効果がありません。
:cache	コンパイルを高速化するために、Sass を解析時にキャッシュするかどうか。デフォルト設定は true です。
:read_cache	このオプションが設定され、:cache オプションが設定されていない場合、キャッシュは Sass キャッシュが存在する場合のみ読み取ります。キャッシュがない場合、キャッシュはコンパイルされません。
:cache_store	このオプションが Sass::CacheStores::Base のサブクラスのインスタンスに設定されている場合、このキャッシュ ストアは保存と取得に使用されます。コンパイル結果をキャッシュします。デフォルト設定は Sass::CacheStores::Filesystem で、初期化に使用されます。
:never_update	テンプレート ファイルが変更された場合でも、CSS ファイルは決して更新しないでください。 true に設定すると、パフォーマンスがわずかに向上する可能性があります。デフォルトは常に false です。このオプションは、Rack、Ruby on Rails、または Merb でのみ意味を持ちます。
:always_update	CSS ファイルは、テンプレートが変更されたときだけでなく、すべてのコントローラーがアクセスされたときでも常に更新される必要があります。デフォルトは false です。このオプションは、Rack、Ruby on Rails、または Merb でのみ意味を持ちます。
:always_check	Sass テンプレートは、サービスの起動時だけでなく、すべてのコントローラー アクセスでも常に更新をチェックする必要があります。 Sass テンプレートが更新されると、再コンパイルされ、対応する CSS ファイルが上書きされます。本番モードのデフォルトは false、それ以外の場合は true。このオプションは、Rack、Ruby on Rails、または Merb でのみ意味を持ちます。
:poll	true の場合、ネイティブ ファイル システムのバックエンドの代わりに、常に Sass::Plugin::Compiler#watch バックエンド ポーリングを使用します。
:full_Exception	Sass コード内のエラーについて、生成された CSS ファイルに詳細な説明を提供するかどうか。 true に設定すると、このエラーは CSS ファイルのコメントとページの上部 (サポートされているブラウザ) に、行番号とソース コード スニペットを含めて表示されます。 そうしないと、Ruby コードで例外が発生します。本番モードのデフォルトは false、それ以外の場合は true。
:template_location	アプリケーションのルート ディレクトリにある Sass テンプレート (テンプレート) のディレクトリへのパス。ハッシュされた場合、:css_location は無視され、このオプションは入力ディレクトリと出力ディレクトリ間のマッピングを指定します。ハッシュの代わりにバイナリ リストを指定することもできます。デフォルトは css_location + "/sass" です。このオプションは、Rack、Ruby on Rails、または Merb でのみ意味を持ちます。複数のテンプレートの場所を指定した場合、それらはすべてインポート パスに配置され、それらの間でインポートできることに注意してください。 使用できる形式が多数あるため、このオプションは直接設定する必要があり、アクセスしたり変更したりしないでください。代わりに、Sass::Plugin#template_location_array、 Sass::Plugin#add_template_location、 Sass::Plugin#remove_template_location メソッドを使用してください。
:css_location	CSS ファイル出力へのパス:template_location オプションがハッシュの場合、このオプションは無視されます。デフォルト設定は「./public/stylesheets」です。このオプションは、Rack、Ruby on Rails、または Merb でのみ意味を持ちます。
:cache_location	ここで、キャッシュ sassc ファイルが書き込まれるパス。 Rails と Merb ではデフォルトで「./tmp/sass-cache」、それ以外の場合はデフォルトで「./.sass-cache」になります。設定されている場合、これは無視されます。
:unix_newlines	true の場合、ファイルを書き込むときに Unix スタイルの改行を使用します。 Windows 上でのみ、かつ Sass がファイルに書き込まれるとき (Rack、Rails、または Merb で、Sass::Plugin を直接使用するとき、またはコマンドライン実行可能ファイルを使用するとき) にのみ意味があります。
:filename	レンダリングされたファイルのファイル名。これは純粋にエラーを報告するためのもので、Rack、Rails、または Merb の使用時に自動的に設定されます。
:line	Sass テンプレート (テンプレート) の最初の行の行番号。エラーの報告に使用される行番号。この設定は、Sass テンプレートが Ruby ファイルに埋め込まれている場合に便利です。
:load_paths	ディレクティブ経由でインポートされたファイル システムまたは Sass テンプレートのパスを含む配列。それらは文字列、Pathname オブジェクト、または Sass::Importers::Base のサブクラスです。このオプションのデフォルトは作業ディレクトリであり、Rack、Rails、または Merb では、このオプションの値は関係なく :template_location です。ロードパスは、Sass.load_paths および SASS_PATH 環境変数によって通知することもできます。
:filesystem_importer	Sass::Importers::Base のサブクラスで、通常の文字列のロード パスを処理するために使用されます。これにより、ファイル システムからファイルがインポートされるはずです。これは、文字列パラメーター (ロード パス) を受け取り、Sass::Importers::Base から継承するコンストラクターに渡される Class オブジェクトである必要があります。デフォルトは Sass::Importers::Filesystem です。
:sourcemap	ソースマップの生成方法を制御します。これらのソースマップはブラウザに Sass スタイルの検索方法を指示し、各 CSS スタイルを生成します。このオプションには 3 つの有効な値があります: :auto 可能な場合は相対 URI を使用します。ソース スタイルが使用しているサーバー上で提供されると仮定すると、相対的な場所はローカル ファイル システム上と同じになります。相対 URI が使用できない場合は、「file:」に置き換えられます。 :file 常に「file:」 URI を使用します。これはローカルで機能しますが、リモート サーバーにデプロイすることはできません。 :inline ソースマップに完全なソース テキストが含まれており、これが最も便利ですが、非常に大きなソースマップ ファイルが生成される可能性があります。 最後に、 :none により、ソースマップ ファイルは生成されなくなります。
:line_numbers	true に設定すると、定義されたセレクターの行番号とファイル名がコンパイルされた CSS にコメントとして挿入されます。これは、特に と を使用する場合のデバッグに役立ちます。このオプションには、:line_comments というニックネームが付いています。 :compressed 出力スタイルを使用する場合、または :debug_info/ :trace_selectors オプションを使用する場合、このオプションは自動的に無効になります。
:trace_selectors	true に設定すると、合計の完全なトレースが各セレクターの前に挿入されます。これは、ブラウザーで渡されたスタイルシートと組み込まれたスタイルシートをデバッグするときに便利です。このオプションは、:line_comments オプションよりも優先され、:debug_info オプションによって置き換えられます。 :compressed 出力スタイルを使用する場合、このオプションは自動的に無効になります。
:debug_info	true に設定すると、定義されたセレクターの行番号とファイル名がコンパイルされた CSS に挿入され、識別されたブラウザーで使用できるようになります。 。 Sass ファイル名と行番号を表示する FireSass 用の Firebug 拡張機能。 :compressed 出力スタイルを使用する場合、このオプションは自動的に無効になります。
:custom	このオプションは、個々のアプリケーション設定で使用して、カスタム Sass 機能でデータを利用できるようにすることができます。
:quiet	true に設定すると、警告メッセージが無効になります。

構文の選択

Sass コマンドライン ツールは、ファイル拡張子を使用して使用している構文を決定しますが、必ずしもファイル名であるとは限りません。 sass コマンドライン プログラムはデフォルトでインデントされた構文を使用しますが、入力を SCSS 構文に解析する必要がある場合は、それに --scss オプションを渡すことができます。さらに、sass コマンド ライン プログラムを使用することもできます。これは sass プログラムとまったく同じですが、デフォルトの構文は SCSS です。

エンコーディング

Ruby 1.9 以降の環境で Sass を実行する場合、Sass はファイルのエンコーディング形式に対してより敏感になり、最初に CSS に基づいてスタイル ファイルのエンコーディング形式を決定します。仕様 失敗した場合、Ruby 文字列エンコーディングが検出されます。つまり、Sass は最初に Unicode バイト オーダー マークをチェックし、次に @charset 宣言をチェックし、最後に Ruby 文字列エンコーディングをチェックします。どちらも検出されない場合は、デフォルトの UTF-8 エンコーディングが使用されます。

CSS と同様に、スタイルシートのエンコーディングを明示的に指定するには、@charset 宣言を使用します。スタイル ファイルの先頭に @charset "encoding-name"; を挿入します (その前に空白やコメントはありません)。Sass は指定されたエンコーディング形式に従ってファイルをコンパイルします。どのエンコーディングを使用する場合でも、Unicode 文字セットに変換可能である必要があることに注意してください。

デフォルトでは、Sass は常に UTF-8 エンコーディングで CSS ファイルを出力します。 @charset 宣言は、出力ファイルに非 ASCII 文字が含まれる場合にのみ、@charset 宣言ステートメントの代わりに UTF-8 バイト オーダー マークを使用します。