Sass-構文

この章では、SASSについて学習します Syntax。SASSは2つの構文をサポートしています。SCSS そして Indented syntax。

ザ・ SCSS (Sassy CSS)CSS構文の拡張です。これは、すべての有効なCSSが有効なSCSSでもあることを意味します。SCSSは、大きなスタイルシートの保守をはるかに容易にし、ベンダー固有の構文を認識できます。多くのCSSおよびSCSSファイルは拡張子を使用します.scss。
Indented −これは古い構文であり、単に次のように呼ばれることもあります。 SASS。この形式の構文を使用すると、CSSを簡潔に記述できます。SASSファイルは拡張子を使用します.sass。

SASSインデント構文

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

ではなくインデントを使用します{ そして } ブロックを区切る。
ステートメントを区切るために、セミコロン（;）の代わりに改行を使用します。
プロパティ宣言とセレクターは、独自の行とステートメント内に配置する必要があります{ そして }上に配置しなければならない新しいラインとインデント。

たとえば、次の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つの方法で宣言できます-

プロパティはCSSと同様に宣言できますが、 semicolon(;)。
colon(:) すべてのプロパティ名の前に付けられます。

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

.myclass
   :color red
   :font-size 0.2em

デフォルトでは、上記の両方の方法（セミコロンとコロンをプロパティ名の前に付けないプロパティ宣言）を使用できます。ただし、：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 Tutorialspoint!!!</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_selectors.htmlファイルに保存します。
このHTMLファイルをブラウザで開くと、以下のような出力が表示されます。

コメントは1行全体を占め、その下にネストされたすべてのテキストを囲みます。それらはインデントされた構文で行ベースです。コメントの詳細については、このリンクを参照してください。

@インポート

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

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

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

これはSASSで次のように書くことができます-

@import themes/blackforest
@import fontstyle.sass

Mixinディレクティブ

SASSは次のようなディレクティブの省略形をサポートします @mixin そして @include。の代わりに@mixin そして @include あなたが使用することができます = そして + 文字。入力が少なくて済み、コードがシンプルで読みやすくなります。

たとえば、ミックスインディレクティブは次のように記述できます。

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

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

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

非推奨の構文

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

S.いいえ。	オペレーターと説明
1	= 変数とプロパティをSassScriptの値に設定するときに、：の代わりに使用されました。
2	\|\|= 変数のデフォルト値を割り当てるときはいつでも、：の代わりに使用されました。
3	! $の代わりに！変数プレフィックスとして使用されました。$の代わりに使用しても、機能は変更されません。