Sass-@eachディレクティブ

説明

_ @ each_では、リスト内の各アイテムの値を含む変数が定義されています。

構文

@each $var in <list or map>

構文は以下に簡単に説明されています-

$ var -変数の名前を表します。 _ @ each_ルールは、リスト内の各アイテムに $ var を設定し、 $ var の値を使用してスタイルを出力します。
<リストまたはマップ> -これらは_list_または_map_を返すSassScript式です。

例

次の例は、_ @ each_ディレクティブの使用を示しています-

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <p class = "p_red">This is line one.</p>
      <p class = "p_green">This is line two.</p>
      <p class = "p_yellow">This is line three.</p>
      <p class = "p_blue">This is line four.</p>
   </body>
</html>

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

style.scss

@each $color in red, green, yellow, blue {
   .p_#{$color} {
      background-color: #{$color};
   }
}

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

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

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

style.css

.p_red {
   background-color: red;
}

.p_green {
   background-color: green;
}

.p_yellow {
   background-color: yellow;
}

.p_blue {
   background-color: blue;
}

出力

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

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

Sass Control Directives＆Expressions

Sass-each

Sass-@eachディレクティブ

説明

構文

例

style.scss

style.css

出力

目次