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-syntax

目次