Sass-概要

SASSとは何ですか？

SASS（Syntactically Awesome Stylesheet）はCSSプリプロセッサーであり、CSSの繰り返しを減らし、時間を節約します。これは、ドキュメントのスタイルをきれいかつ構造的に記述する、より安定した強力なCSS拡張言語です。

最初は Hampton Catlin によって設計され、2006年に Natalie Weizenbaum によって開発されました。その後、 Weizenbaum と Chris Eppstein は初期バージョンを使用してSassScriptでSassを拡張しました。

SASSを使用する理由

CSSにインデントされた構文（独自の構文）を提供する前処理言語です。
コードをより効率的に記述でき、保守が簡単なスタイルシートの作成に使用されるいくつかの機能を提供します。
これはCSSのスーパーセットです。つまり、CSSのすべての機能が含まれており、 Ruby でコーディングされたオープンソースのプリプロセッサです。
フラットCSSよりも優れた構造化された形式でドキュメントスタイルを提供します。再利用可能なメソッド、論理ステートメント、および色操作、数学、パラメーターリストなどの組み込み関数を使用します。

SASSの機能

CSSのバージョンとより安定し、強力で、互換性があります。
これはCSSのスーパーセットであり、JavaScriptに基づいています。
CSSの構文シュガーとして知られているため、ユーザーが物事をより明確に読んだり表現したりするのが簡単になります。
独自の構文を使用し、読みやすいCSSにコンパイルします。
短い時間で少ないコードで簡単にCSSを書くことができます。
これはオープンソースのプリプロセッサであり、CSSに解釈されます。

SASSの利点

これにより、プログラミング構成にクリーンなCSSを記述できます。
CSSをすばやく書くのに役立ちます。
これはCSSのスーパーセットであり、デザイナーと開発者がより効率的かつ迅速に作業するのに役立ちます。
SassはすべてのバージョンのCSSと互換性があるため、使用可能なCSSライブラリを使用できます。
ネストされた構文と、色の操作、数学、その他の値などの便利な機能を使用できます。

SASSの欠点

開発者がこのプリプロセッサに存在する新機能を学習するには時間がかかります。
多くの人が同じサイトで作業している場合、同じプリプロセッサを使用する必要があります。 Sassを使用する人もいれば、CSSを使用してファイルを直接編集する人もいます。そのため、サイトでの作業が困難になります。
ブラウザの組み込みの要素インスペクターの利点を失う可能性があります。

Sass-インストール

この章では、Rubyをインストールするための段階的な手順を学びます。RubyはSASSファイルの実行に使用されます。

SASSのシステム要件

オペレーティングシステム-クロスプラットフォーム
ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari、Opera
プログラミング言語-Ruby

Rubyのインストール

ステップ1 *-リンクhttps://www.ruby-lang.org/en/downloads/を開くと、次のような画面が表示されます-

SASSインストール

_現在の安定版のzipファイルをダウンロードします。

ステップ2 *-次に、セットアップを実行して *Ruby をシステムにインストールします。

ステップ3 *-次に、Ruby binフォルダーを_PATHユーザー変数_および_システム変数_に追加して、gemコマンドを使用します。

パスユーザー変数-

[マイコンピュータ]アイコンを右クリックします。
Properties を選択します。
次に、*詳細*タブをクリックし、*環境変数*をクリックします。

SASSインストール

_Environment Variables_ウィンドウで、以下のスクリーンショットに示すように_PATH_をダブルクリックします-

SASSインストール

図のように、[ユーザー変数の編集]ボックスが表示されます。 _Variable value_フィールドにruby binフォルダーパスを C：\ Ruby \ bin として追加します。パスが既に他のファイルに設定されている場合は、その後にセミコロンを入れて、以下に示すようにRubyフォルダーのパスを追加します。

SASSインストール

[OK]ボタンをクリックします。

システム変数-

[新規]ボタンをクリックします。

SASSインストール

次に、以下に示すように New System Variable ブロックが表示されます。

SASSインストール

_Variable name_フィールドに RubyOpt を、_Variable value_フィールドに rubygems を入力します。 _変数名_と_値_を書き込んだ後、 OK ボタンをクリックします。

ステップ4 *-システムでコマンドプロンプトを開き、次の行を入力します-

gem install sass

ステップ5 *-次に、SASSを正常にインストールすると、次の画面が表示されます。

SASSインストール

例

以下は、SASSの簡単な例です。

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to finddevguides</h3>
   </body>
</html>

ここで、ファイルを_style.scss_として作成します。これはCSSに非常に似ており、唯一の違いは.scss拡張子で保存されることです。と.scssファイルの両方がフォルダ ruby 内に作成されます。 .scssファイルを ruby \ lib \ sass \ フォルダーに保存できます（このプロセスの前に、libディレクトリーに sass としてフォルダーを作成します）。

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

SASSインストール

上記のコマンドを実行すると、_style.css_ファイルが自動的に作成されます。 SCSSファイルを変更するたびに、_style.css_ファイルが自動的に更新されます。

上記のコマンドを実行すると、_style.css_ファイルには次のコードが含まれます-

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のコードを hellol ファイルに保存します。
このHTMLファイルをブラウザーで開きます。

SASSインストール

Sass-構文

この章では、SASS 構文*について学習します。 SASSは、 *SCSS と*インデント構文*の2つの構文をサポートしています。

* SCSS（Sassy CSS）は、CSS構文の拡張機能です。これは、すべての有効なCSSも有効なSCSSであることを意味します。 SCSSは、大規模なスタイルシートの維持をはるかに容易にし、ベンダー固有の構文を認識できます。多くのCSSおよびSCSSファイルは、拡張子 *.scss を使用します。
インデント-これは古い構文であり、 SASS と呼ばれることもあります。この形式の構文を使用すると、CSSを簡潔に記述できます。 SASSファイルは、拡張子 .sass を使用します。

SASSインデント構文

SASSインデント構文または単なるSASSは、CSSベースのSCSS構文の代替です。

ブロックを区切るために、* \ {および} *ではなく_indentation_を使用します。
ステートメントを分離するには、_semicolons（;）_の代わりに_newlines_を使用します。
プロパティ宣言とセレクターは、_own line_に配置し、* \ {および} *内のステートメントは、_new line_および_indented_に配置する必要があります。

たとえば、次のSCSSコードを考慮してください-

.myclass {
   color = red;
   font-size = 0.2em;
}

*indented* 構文は古い構文であり、新しいSassファイルでの使用は推奨されていません。 このファイルを使用すると、プロパティと変数を設定する代わりに *=* を使用したため、CSSファイルにエラーが表示されます。

次のコマンドを使用して上記のコードをコンパイルします-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行します。以下に示すように、_style.css_ファイルにエラーが表示されます-

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

SASSの構文の違い

ほとんどのCSSおよびSCSS構文は、SASSで完全に機能します。しかし、次のセクションで説明されているいくつかの違いがあります-

プロパティの構文

CSSプロパティは2つの方法で宣言することができます-

プロパティは、* semicolon（;）*なしでCSSと同様に宣言できます。
* colon（：）*はすべてのプロパティ名の前に付けられます。

たとえば、次のように書くことができます-

.myclass
   :color red
   :font-size 0.2em

上記の両方の方法（プロパティ名の前にセミコロンとコロンを付けないプロパティ宣言）をデフォルトで使用できます。ただし、http：//sass-lang.com/documentation/file.SASS_REFERENCEl#property_syntax-option [：property_syntax]オプションを使用する場合、指定できるプロパティ構文は1つだけです。

複数行セレクター

インデント構文では、セレクタは commas の後に表示されるたびに改行に配置できます。

例

次の例では、SCSSファイルでの複数行セレクターの使用について説明します-

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to finddevguides!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

次に、ファイル_style.scss_を作成します。 _.scss_拡張子に注意してください。

style.scss

.class1,
.class2{
   color:red;
}

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行すると、次のコードで_style.css_ファイルが自動的に作成されます-

生成された_style.css_は以下に示すとおりです-

style.css

.class1,
.class2 {
   color: red;
}

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードをmultiline_selectorslファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Syntax

@インポート

SASSでは、 @ import ディレクティブを引用符付き/なしで記述できます。 SCSSとは異なり、引用符で使用する必要があります。

たとえば、SCSSでは @ import ディレクティブを次のように使用できます-

@import "themes/blackforest";
@import "style.sass";

これは、SASSで次のように記述できます-

@import themes/blackforest
@import fontstyle.sass

Mixinディレクティブ

SASSは、 @ mixin や @ include などのディレクティブの省略形をサポートしています。 @ mixin および @ include の代わりに、 = および + 文字を使用できます。これにより、入力が少なくなり、コードが簡単になり、読みやすくなります。

たとえば、次のようにmixinディレクティブを書くことができます-

=myclass
   font-size: 12px;
p
   +myclass

上記のコードはと同じです-

@mixin myclass
   font-size: 12px;
p
   @include myclass

非推奨の構文

SASSは、いくつかの古い構文の使用をサポートしています。ただし、SASSでこの構文を使用することは*推奨されません*。この構文を使用すると警告が表示され、それ以降のバージョンでは削除されます。古い構文の一部を次の表に示します。

S. No.	Operator & Description
1	= 代わりに使用されました：変数とプロパティをSassScriptの値に設定するとき。
2	*
	=* 変数のデフォルト値を割り当てるときは常に：の代わりに使用されました。
3	! $の代わりに、！変数の接頭辞として使用されました。 $の代わりに使用される場合、機能は変更されません。

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 _Sass CacheStores :: Base_のインスタンスに設定することにより、キャッシュされた結果の保存とアクセスに使用できます。
7	:never_update テンプレートファイルが変更された場合、CSSファイルは更新されません。デフォルトではfalseに設定されています。
8	:always_update テンプレートファイルが変更されるたびにCSSファイルを更新する必要があります。
9	:always_check サーバーが起動するたびに更新を確認する必要があります。 SASSテンプレートファイルに更新がある場合、CSSファイルを再コンパイルして上書きします。
10	:poll _Sass Plugin :: Compiler＃watch（CSSファイルのテンプレートと更新を監視します）_のポーリングバックエンドを使用して、trueに設定します。
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 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_宣言が使用されます。

Sass-CSS拡張

この章では、* CSS拡張機能*について学習します。 CSS拡張機能を使用して、Webページの機能を強化できます。次の表は、SASSで使用されるCSS拡張の一部を示しています-

S. No.	CSS Extension & Description
1	Nested Rules これは、複数のCSSルールを相互に組み合わせる方法です。
2	Referencing Parent Selectors: & ＆*文字を使用して親セレクターを選択するプロセスです。
3	Nested Properties プロパティを他のプロパティにネストできるため、別の関連コードをグループ化できます。
4	Placeholder Selectors Sassは_ @ extend_ディレクティブを使用して、クラスまたはIDセレクターを使用して_placeholder selector_をサポートします。

Sass-コメント

この章では、Sass Comments について学習します。コメントは実行不能なステートメントであり、ソースコードに配置されます。コメントはソースコードを理解しやすくします。 SASSは2種類のコメントをサポートしています。

複数行コメント-これらは/および/を使用して記述されます。複数行コメントは、CSS出力で保持されます。
単一行のコメント-これらは // とそれに続くコメントを使用して記述されます。 CSS出力では、単一行のコメントは保持されません。

例

次の例は、SCSSファイル内のコメントの使用を示しています-

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to finddevguides</h1>
      <a href = "http://www.finddevguides.com/">finddevguides</a>
   </body>
</html>

次に、ファイル_style.scss_を作成します。

style.scss

/*This comment is
* more than one line long
 *since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }

//These comments are in single line
//They will not appear in the CSS output,
//since they use the single-line comment syntax.
a { color: blue; }

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

style.css

/*This comment is
* more than one line long
 *since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを sass_commentsl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Comments

複数行コメント内の補間について調べるには、次のリンクをクリックしてください：/sass/sass_comments_interpolation [link]。

Sass –複数行コメントでの補間

説明

複数行コメント内の補間は、結果のCSSで解決されます。中括弧内で変数またはプロパティ名を指定できます。

構文

$var : "value";
/*multiline comments #{$var}*/

例

次の例は、SCSSファイルの複数行コメントでの補間の使用を示しています-

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to finddevguides</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

次に、ファイル_style.scss_を作成します。

style.css

$version: "7.8";
/*Framework version for the generated CSS is #{$version}.*/

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行します。次のコードで_style.css_ファイルを自動的に作成します

style.css

/*Framework version for the generated CSS is 7.8.*/

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを sass_comments_interpolation ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Comments

Sass-スクリプト

SASSは、SASSドキュメントに含めることができるSassScriptと呼ばれる小さな拡張セットを使用して、プロパティ値から変数を計算し、変数、算術、およびその他の関数のプロパティを使用します。 SassScriptは、ミックスインの使用中にセレクターやプロパティ名とともに使用することもできます（ミックスインでは、スタイルシート全体でCSSスタイルを再利用できます）。

次の表は、SASSで使用されるCSS拡張の一部を示しています-

S. No.	CSS Extension & Description
1	Interactive Shell コマンドラインを使用してSassScript式を評価します。
2	Variables 数値、文字、メモリアドレスなどのデータを表します。
3	DataTypes すべてのデータオブジェクトのデータ型を宣言します。
4	Operations 数値、色、文字列、ブール、リスト操作などの操作を提供します。
5	Parentheses 通常、丸括弧（）または角括弧[]でマークされている記号のペアです。
6	Functions いくつかのキーワード引数を提供することにより、関数の使用をサポートします。
7	Interpolation ＃\ {} *構文を使用して、SassScript変数とプロパティ名を提供します。
8	& in SassScript プロパティを別のプロパティにネストできるため、別の関連コードのグループにつながります。
9	Variable Defaults プロパティを別のプロパティにネストできるため、別の関連コードのグループにつながります。

Sass-@-ルールとディレクティブ

次の表に、SASSで使用できるすべてのルールとディレクティブを示します。

S. No.	Directives & Description
1	@import SASSまたはSCSSファイルをインポートし、インポートするファイル名を直接取得します。
2	@media スタイルルールをさまざまなメディアタイプに設定します。
3	@extend @extendディレクティブは、セレクター間でルールと関係を共有するために使用されます。
4	@at-root @ at-rootディレクティブはネストされたルールのコレクションであり、ドキュメントのルートでスタイルブロックを作成できます。
5	@debug @debugディレクティブはエラーを検出し、SassScript式の値を標準エラー出力ストリームに表示します。
6	@warn @warnディレクティブは、問題に関する警告的なアドバイスを提供するために使用されます。 SassScript式の値を標準エラー出力ストリームに表示します。
7	@error @errorディレクティブは、SassScript式の値を致命的なエラーとして表示します。

Sass-ディレクティブと式の制御

この章では、*制御指令と式*について学習します。 SassScriptでサポートされているコントロールディレクティブと式を使用すると、特定の条件に基づいたスタイル設定や、同じスタイルにバリエーションを何度も適用することができます。これらの制御ディレクティブは、主にミックスインで使用される高度なオプションです。コンパスライブラリの一部であるため、かなりの柔軟性が必要です。

次の表は、SASSで使用される制御指令と式の一覧です-

S. No.	Control Directive & Expression with Description
1	if() 条件に基づいて、_if（）_関数は、2つの可能な結果から1つの結果のみを返します。
2	@if _ @ if_ディレクティブはSassScript式を受け入れ、式の結果が_false_または_null_以外の場合は常にネストされたスタイルを使用します。
3	@for _ @ for_ディレクティブを使用すると、ループでスタイルを生成できます。
4	@each _ @ each_ディレクティブでは、リスト内の各アイテムの値を含む変数が定義されます。
5	@while SassScript式を使用し、ステートメントがfalseと評価されるまで、ネストされたスタイルを繰り返し出力します。

Sass-Mixinディレクティブ

ミックスインを使用すると、スタイルのグループを作成できます。これは、非セマンティッククラスを再作成する必要なく、スタイルシート全体で再利用できます。 CSSでは、ミックスインは複数の値またはパラメーターを保存し、関数を呼び出すことができます。繰り返しコードを書くことを避けるのに役立ちます。ミックスイン名には、アンダースコアとハイフンを同じ意味で使用できます。以下はMixinsに存在するディレクティブです-

S. No.	Directive & Description
1	Defining a Mixin _ @ mixin_ディレクティブは、ミックスインを定義するために使用されます。
2	Including a Mixin _ @ include_ディレクティブは、ドキュメントにミックスインを含めるために使用されます。
3	Arguments SassScriptの値は、ミックスインの引数として使用できます。これは、ミックスインが含まれ、ミックスイン内の変数として使用可能な場合に指定されます。
4	Passing Content Blocks to a Mixin スタイルのブロックがミックスインに渡されます。

Sass-関数ディレクティブ

この章では、*機能指令*について学習します。 SASSでは、独自の関数を作成してスクリプトコンテキストで使用するか、任意の値で使用できます。関数は、関数名とパラメーターを使用して呼び出されます。

例

次の例は、SCSSファイルでの関数ディレクティブの使用を示しています-

function_directive

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

次に、ファイル_style.scss_を作成します。

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n *$first-width + ($n - 1)* $second-width;
}

#set_width { padding-left: adjust_width(10); }

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

style.css

#set_width {
   padding-left: 95px;
}

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを function_directivel ファイルに保存します。 *このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sass Function Directives

出力では、左詰めが適用されていることがわかります。

mixinと同様に、関数もグローバルに定義された変数にアクセスでき、パラメーターを受け入れることができます。* @ return *を使用して、関数の戻り値を呼び出す必要があります。キーワードパラメータを使用して、SASS定義の関数を呼び出すことができます。

以下に示すように、上記の関数を呼び出します。

#set_width { padding-left: adjust_width($n: 10); }

命名規則

名前の競合を避けるために、関数名に接頭辞を付けて、簡単に区別できるようにすることができます。ミックスインと同様に、変数引数もユーザー定義関数でサポートされています。関数と他のSASS識別子は、アンダースコア（_）とハイフン（-）を同じ意味で使用できます。

たとえば、関数が adjust_width として定義されている場合、 adjust-width として使用でき、その逆も同様です。

Sass-出力スタイル

この章では、* SASS出力スタイル*について学習します。 SASSが生成するCSSファイルは、ドキュメントの構造を反映したデフォルトのCSSスタイルで構成されています。デフォルトのCSSスタイルは適切ですが、すべての状況に適しているとは限りません。一方、SASSは他の多くのスタイルをサポートしています。

次の異なる出力スタイルをサポートしています-

：ネスト

ネストされたスタイルは、SASSのデフォルトのスタイルです。このスタイル設定方法は、大きなCSSファイルを扱う場合に非常に便利です。これにより、ファイルの構造が読みやすくなり、理解しやすくなります。すべてのプロパティには独自の行があり、各ルールのインデントは、ネストの深さに基づいています。

たとえば、次のようにSASSファイルにコードをネストできます-

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

：拡張

拡張タイプのCSSスタイルでは、各プロパティとルールに独自の行があります。ネストされたCSSスタイルと比較して、より多くのスペースが必要です。 [ルール]セクションはプロパティで構成されます。プロパティはすべてルール内で使用されますが、ルールはインデントに従いません。

たとえば、次のようにSASSファイルのコードを展開できます-

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

：コンパクト

コンパクトなCSSスタイルは、ExpandedとNestedよりも競争力があります。プロパティではなくセレクターに主に焦点を当てています。各セレクタは1行を使用し、そのプロパティも同じ行に配置されます。ネストされたルールは、改行なしで隣り合わせに配置され、ルールの個別のグループはそれらの間に改行を入れます。

たとえば、次のようにSASSファイルのコードを圧縮できます-

#first {
   background-color: #00FFFF; color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline; font-size: 5em; background-color: #FFFF00;
}

：圧縮

圧縮されたCSSスタイルは、上記で説明した他のすべてのスタイルと比較して、最小限のスペースを取ります。ファイルの末尾にあるセレクターと改行のみを分離するために空白を提供します。このスタイリングの方法は混乱を招き、簡単に読むことはできません。

たとえば、次のようにSASSファイルのコードを圧縮できます-

#first {
   background-color:#00FFFF;color:#C0C0C0
}

#first p {
   width:10em
}

.highlight {
   text-decoration:underline;font-size:5em;background-color:#FFFF00
}

Sassの拡張

SASSの機能を拡張して、ユーザーにさまざまなタイプの機能とカスタマイズを提供できます。これらの機能を利用するには、Rubyの知識が必要です。

カスタムSASS関数の定義

Ruby APIを使用しながら、独自のSASS関数を定義できます。次のコードに示すように、Rubyメソッドにカスタム関数を追加することにより、カスタム関数を追加できます-

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

ご覧のコードでは、Function、declareは、関数の引数名を指定しています。失敗した場合、関数が機能していても引数を受け入れず、任意のキーワード引数を取ります。 value_アクセサーを使用してRubyの値を取得し、_rgb、red、green、または_blue_を使用してカラーオブジェクトにアクセスできます。

キャッシュストア

SASSは解析されたドキュメントのキャッシュを保存します。キャッシュは再度解析せずに再利用できます。 SASSは*：cache_location *を使用して、キャッシュファイルをファイルシステムに書き込みます。 SASSファイルのコンパイルが高速化され、キャッシュされたファイルを削除すると、次回のコンパイル時に再び生成されます。 *：cache_store *オプションを設定して、独自のキャッシュストアを定義できます。これにより、ファイルシステムにキャッシュファイルが書き込まれるか、キャッシュファイルがrubyプロセスまたはマシンに共有されます。 SASSは、_Sass: CacheStores :: Base_のサブクラスのインスタンスを使用して、キャッシュ結果を保存および取得します。

カスタムインポーター

SASSは_ @ import_を使用してSCSSおよびSASSファイルをインポートし、_ @ import_ルールにパスを渡して、指定されたパスの適切なパスコードを見つけます。 SASSインポーターは、ファイルシステムを使用してコードをロードし、データベースまたは異なるファイル命名スキームを使用してロードに追加します。

単一のインポーターは、単一のファイルをロードでき、ファイルシステムのパスとともに_：load_paths_配列に配置できます。 _ @ import_を使用している間、SASSはロードされたパスを探し、インポーターのパスをインポートします。パスが見つかると、インポートされたファイルが使用されます。ユーザーは *Sass: Importers :: Base* からインポーターを継承できます。

Sass-interview-questions

Sass-quick-guide

Sass-概要

SASSとは何ですか？

SASSを使用する理由

SASSの機能

SASSの利点

SASSの欠点

Sass-インストール

SASSのシステム要件

Rubyのインストール

例

style.css

Sass-構文

SASSインデント構文

SASSの構文の違い

プロパティの構文

複数行セレクター

例

style.scss

style.css

出力

コメント

@インポート

Mixinディレクティブ

非推奨の構文

Sassを使用する

Rack/Rails/Merbプラグイン

キャッシング

オプション

構文選択

エンコーディング

Sass-CSS拡張

Sass-コメント

例

style.scss

style.css

出力

Sass –複数行コメントでの補間

説明

構文

例

style.css

style.css

出力

Sass-スクリプト

Sass-@-ルールとディレクティブ

Sass-ディレクティブと式の制御

Sass-Mixinディレクティブ

Sass-関数ディレクティブ

例

function_directive

style.scss

style.css

出力

命名規則

Sass-出力スタイル

：ネスト

：拡張

：コンパクト

：圧縮

Sassの拡張

カスタムSASS関数の定義

キャッシュストア

カスタムインポーター