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::Rack

MerbRailsに速度とモジュール性を提供する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つの値を使用します-

  • :auto−相対URIが含まれています。相対URIがない場合は、「file:」URIを使用します。

  • :file −リモートサーバーではなくローカルで機能する「file:」URIを使用します。

  • :inline −大きなソースマップファイルを作成するために使用されるソースマップにソーステキストが含まれています。

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宣言が使用されます。