Sassの使用
SASSはより強力で安定しており、CSSの拡張機能を使用して基本言語に電力を供給します。SASSは3つの異なる方法で使用できます-
- コマンドラインツールとして
- Rubyモジュールとして
- Rackenableフレームワークのプラグインとして
WindowsでSASSを使用している場合は、インストールする必要があります Ruby最初。Rubyのインストールの詳細については、SASSのインストールの章を参照してください。
次の表に、SASSコードの実行に使用されるコマンドを示します。
| S.いいえ。 | コマンドと説明 |
|---|---|
| 1 | sass input.scss output.css コマンドラインからSASSコードを実行するために使用されます。 |
| 2 | sass --watch input.scss:output.css SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように通知します。 |
| 3 | sass --watch app/sass:public/stylesheets SASSのディレクトリに多くのファイルが含まれている場合、ディレクトリ全体を監視するために使用されます。 |
ラック/レール/ Merbプラグイン
RackRubyでWebアプリケーションを開発するために使用されるWebサーバーインターフェイスです。Rackの詳細については、このリンクにアクセスしてください。
SASSを有効にするには Rails 3 を使用したバージョン environment.rb 下に存在するファイル configフォルダ。次のコードを使用して、Rails3のSASSを有効にします-
config.gem "sass"Rails 3（およびそれ以降のバージョン）のGemfileに対して、次の行を次のように使用できます。
gem "sass"Railsは、JSON、HTML、CSS、JavaScriptなどのWeb標準を使用してユーザーインターフェイスを表示するオープンソースのWebフレームワークです。Railsを使用するには、Rubyとオブジェクト指向プログラミングの基本的な知識が必要です。Railsフレームワークの詳細についてはこちらをご覧ください。
でSASSを有効にする場合 Rack アプリケーションで、次の行をに追加します config.ru アプリのルートディレクトリにあるファイル-
require 'sass/plugin/rack'
use Sass::Plugin::RackMerbRailsに速度とモジュール性を提供するWebアプリケーションフレームワークです。Merbの詳細については、このリンクを開いてください。
SASSを有効にするには Merb 次の行をに追加します config/dependencies.rb ファイル-
dependency "merb-haml"キャッシング
SASSは、テンプレートやパーシャルなどのドキュメントをキャッシュします。これらのドキュメントは、変更されていない限り、解析せずに再利用できます。テンプレートを別々のファイルに分割し、それらをすべて1つの大きなファイルにインポートすると、SASSファイルのコンパイルが高速になり、さらにうまく機能します。キャッシュされたファイルを削除すると、次回のコンパイル時に再度生成されます。
オプション
次の行を使用して、Railsのenvironment.rbファイルまたはRackアプリケーションのconfig.ruファイルでオプションを設定できます。
Sass::Plugin.options[:style] = :compact次の行を使用して、Merbのinit.rbファイルにオプションを設定することもできます-
Merb::Plugin.config[:sass][:style] = :compact以下の表で説明されているように、SASSおよびSCSSで使用可能ないくつかのオプションがあります-
| S.いいえ。 | オプションと説明 |
|---|---|
| 1 | :style 出力のスタイルを表示します。 |
| 2 | :syntax sassにはインデント構文を使用し、scssにはCSS拡張構文を使用できます。 |
| 3 | :property_syntax インデントされた構文を使用してプロパティを利用します。正しくない場合は、エラーがスローされます。たとえば、「background：＃F5F5F5」について考えてみます。ここで、backgroundはプロパティ名であり、＃F5F5F5はそのプロパティ値です。プロパティ名の後にコロンを使用する必要があります。 |
| 4 | :cache SASSファイルのコンパイルを高速化します。デフォルトではtrueに設定されています。 |
| 5 | :read_cache キャッシュが設定されておらず、read_cacheが設定されている場合は、SASSファイルのみを読み取ります。 |
| 6 | :cache_store Sass :: CacheStores :: Baseのインスタンスに設定することで、キャッシュされた結果を保存してアクセスするために使用できます。 |
| 7 | :never_update テンプレートファイルが変更された場合、CSSファイルを更新しないでください。デフォルトではfalseに設定されています。 |
| 8 | :always_update テンプレートファイルが変更されるたびにCSSファイルを更新する必要があります。 |
| 9 | :always_check サーバーが起動するたびに更新を確認する必要があります。SASSテンプレートファイルに更新がある場合は、CSSファイルを再コンパイルして上書きします。 |
| 10 | :poll これは、trueに設定することにより、Sass :: Plugin :: Compiler＃watch（CSSファイルのテンプレートと更新を監視する）のポーリングバックエンドを使用します。 |
| 11 | :full_exception 生成されたCSSファイル内のSASSコードで例外が発生するたびに、エラーの説明が表示されます。CSSファイルのソースとともにエラーが発生した行番号を表示します。 |
| 12 | :template_location これは、アプリケーションのテンプレートディレクトリへのパスを提供します。 |
| 13 | :css_location これは、アプリケーションのCSSスタイルシートへのパスを提供します。 |
| 14 | :unix_newlines trueに設定することにより、ファイルを書き込むときにUnixスタイルの改行を提供します。 |
| 15 | :filename これは、表示され、エラーの報告に使用されるファイル名の名前です。 |
| 16 | :line SASSテンプレートの最初の行を指定し、エラーの行番号を表示します。 |
| 17 | :load_paths @importディレクティブを使用して含まれるSASSテンプレートのパスをロードするために使用されます。 |
| 18 | :filesystem_importer これは、Sass :: Importers :: Baseサブクラスを使用して文字列のロードパスを処理するファイルシステムからファイルをインポートするために使用されます。 |
| 19 | :sourcemap SASSスタイルを見つけるようにブラウザに指示するソースマップを生成します。3つの値を使用します-
|
| 20 | :line_numbers trueに設定すると、CSSファイルで報告されたエラーの行番号が表示されます。 |
| 21 | :trace_selectors trueに設定されている場合、インポートとミックスインのセレクターをトレースするのに役立ちます。 |
| 22 | :debug_info trueに設定されている場合、行番号とファイルを使用してSASSファイルのデバッグ情報を提供します。 |
| 23 | :custom 個別のアプリケーションのSASS機能でデータを利用できるようにします。 |
| 24 | :quiet trueに設定すると、警告が無効になります。 |
構文の選択
SASSコマンドラインツールを使用して、SASSテンプレートで使用している構文を判別できます。デフォルトでは、SASSはCSSベースのSCSS構文の代わりとなるインデント構文を使用します。SASSプログラムに似たSCSSコマンドラインプログラムを使用できますが、デフォルトでは、構文はSCSSと見なされます。
エンコーディング
SASSは、次のCSS仕様を指定することにより、スタイルシートの文字エンコードを使用します-
最初にUnicodeバイトをチェックし、次に@charset宣言をチェックし、次にRuby文字列エンコーディングをチェックします。
次に、何も設定されていない場合は、文字セットエンコーディングをUTF-8と見なします。
@charset宣言を使用して、文字エンコードを明示的に決定します。スタイルシートの冒頭で「@charsetencodingname」を使用するだけで、SASSはこれが指定された文字エンコードであると想定します。
SASSの出力ファイルに非ASCII文字が含まれている場合は、@ charset宣言が使用されます。