Sass-using-sass
Sassを使用する
SASSはより強力で安定しており、CSSの拡張機能を使用して基本言語にパワーを提供します。 あなたは3つの異なる方法でSASSを使用することができます-
- コマンドラインツールとして
- Rubyモジュールとして
- Rack Enable Frameworkのプラグインとして
WindowsでSASSを使用している場合は、最初に Ruby をインストールする必要があります。 Rubyのインストールの詳細については、リンク：/sass/sass_installation [SASS Installation]の章を参照してください。
次の表は、SASSコードの実行に使用されるコマンドを示しています-
| S. No. | Command & Description |
|---|---|
| 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がディレクトリに多くのファイルを含む場合、ディレクトリ全体を監視するために使用されます。 |
Rack/Rails/Merbプラグイン
*Rack* は、RubyでWebアプリケーションを開発するために使用されるWebサーバーインターフェイスです。 Rackについては、https://rack.github.io/[link]にアクセスしてください。*config* フォルダーの下にある *environment.rb* ファイルを使用して、 *Rails 3* バージョンでSASSを有効にできます。 次のコードを使用して、Rails 3のSASSを有効にします-config.gem "sass"次の行をRails 3（および上記のバージョン）のGemfileに使用できます。
gem "sass"*Rails* は、JSON、HTML、CSS、JavaScriptなどのWeb標準を使用してユーザーインターフェイスを表示するオープンソースのWebフレームワークです。 Railsを使用するには、Rubyとオブジェクト指向プログラミングの基本的な知識が必要です。 on Railsフレームワークlink：/ruby-on-rails/index [こちら]の詳細をご覧ください。*Rack* アプリケーションでSASSを有効にする場合は、アプリのルートディレクトリにある *config.ru* ファイルに次の行を追加します-require 'sass/plugin/rack'
use Sass::Plugin::Rack*Merb* は、Railsに速度とモジュール性を提供するWebアプリケーションフレームワークです。 Merbの詳細については、https://web.archive.org/web/20081204002911/http：//merbivore.com/[link]を開いてください。次の行を config/dependencies.rb ファイルに追加することで、 Merb でSASSを有効にできます-
dependency "merb-haml"キャッシング
SASSは、テンプレートやパーシャルなどのドキュメントをキャッシュします。これらは、変更されていない限り、解析せずに再利用できます。 これにより、SASSファイルのコンパイルが高速化され、テンプレートが個別のファイルに分割され、それらがすべて1つの大きなファイルにインポートされる場合に、さらに適切に動作します。 キャッシュされたファイルを削除すると、次回のコンパイル時に再び生成されます。
オプション
次の行を使用して、Railsの_environment.rb_ファイルまたはRackアプリケーションの_config.ru_ファイルでオプションを設定できます-
Sass::Plugin.options[:style] = :compact次の行を使用して、Merbの_init.rb_ファイルでオプションを設定することもできます-
Merb::Plugin.config[:sass][:style] = :compact以下に示す表で説明されているように、_SASS_および_SCSS_で使用可能なオプションがいくつかあります-
| S. No. | Option & Description |
|---|---|
| 1 |
:style 出力のスタイルを表示します。 |
| 2 |
:syntax _sass_にはインデントされた構文を、_scss_にはCSS拡張構文を使用できます。 |
| 3 |
:property_syntax インデントされた構文を使用して、プロパティを使用します。 正しくない場合、エラーがスローされます。 たとえば、「background：＃F5F5F5」を検討してください。background_はプロパティ名で、＃F5F5F5_はそのプロパティ値です。 プロパティ名の後にコロンを使用する必要があります。 |
| 4 |
:cache SASSファイルのコンパイルを高速化します。 デフォルトではtrueに設定されています。 |
| 5 |
:read_cache _cache_が設定されておらず、_read_cache_が設定されている場合、SASSファイルのみを読み取ります。 |
| 6 |
:cache_store
|
| 7 |
:never_update テンプレートファイルが変更された場合、CSSファイルは更新されません。 デフォルトではfalseに設定されています。 |
| 8 |
:always_update テンプレートファイルが変更されるたびにCSSファイルを更新する必要があります。 |
| 9 |
:always_check サーバーが起動するたびに更新を確認する必要があります。 SASSテンプレートファイルに更新がある場合、CSSファイルを再コンパイルして上書きします。 |
| 10 |
:poll
|
| 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
|
| 19 |
:sourcemap ブラウザにSASSスタイルを見つけるよう指示するソースマップを生成します。 それは3つの値を使用します-
|
| 20 |
:line_numbers CSSファイルで報告されたエラーの行番号をtrueに設定して表示します。 |
| 21 |
:trace_selectors trueに設定されている場合、インポートおよびミックスインのセレクターをトレースするのに役立ちます。 |
| 22 |
:debug_info trueに設定されている場合、行番号とファイルを使用してSASSファイルのデバッグ情報を提供します。 |
| 23 |
:custom 別のアプリケーションのSASS機能でデータを利用できるようにします。 |
| 24 |
:quiet trueに設定することにより、警告を無効にします。 |
構文選択
SASSコマンドラインツールを使用して、SASSテンプレートで使用している構文を確認できます。 デフォルトで、SASSはlink：/sass/sass_syntax [インデントされた構文]を使用します。これはCSSベースのSCSS構文の代替です。 SASSプログラムに似たSCSSコマンドラインプログラムを使用できますが、デフォルトでは、構文はSCSSと見なされます。
エンコーディング
SASSは、次のCSS仕様を指定することにより、スタイルシートの文字エンコーディングを使用します-
- 最初に、Unicodeバイトをチェックし、次に_ @ charset_宣言をチェックし、次にRuby文字列エンコーディングをチェックします。
- 次に、何も設定されていない場合、文字セットエンコーディングは_UTF-8_と見なされます。
- _ @ charset_宣言を使用して、文字エンコーディングを明示的に決定します。 スタイルシートの先頭で「@charset encoding name」を使用するだけで、SASSはこれが指定された文字エンコーディングであると想定します。
- SASSの出力ファイルに非ASCII文字が含まれている場合、_ @ charset_宣言が使用されます。
