Sass - @each 多重分配與對映

說明

多重分配與對映配合得很好，而且被認為是鍵值對的列表。如果想使用對映，則必須更改 *@each* 語句並使用多重分配。

語法

@each $var1, $var2 in <map>

語法詳解如下 −

$var1, $var2 − 這些表示變數的名稱。
<map> − 它表示鍵值對列表。

示例

以下示例演示瞭如何使用多重分配與對映 −

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

   <body>
      <h1>Welcome to Tutorialspoint</p>
      <h2>Welcome to Tutorialspoint</p>
      <h3>Welcome to Tutorialspoint</p>
   </body>
</html>

下一步，建立檔案 *style.scss*。

style.scss

@each $header, $color in (h1: red, h2: green, h3: blue) {
   #{$header} {
      color: $color;
   }
}

可以透過使用以下命令來讓 SASS 觀察檔案並在 SASS 檔案更改時不斷更新 CSS −

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

下一步，執行上述命令；它將自動建立以下程式碼的 *style.css* 檔案 −

style.css

h1 {
   color: red;
}

h2 {
   color: green; 
}

h3 {
   color: blue; 
}

輸出

讓我們執行以下步驟來了解上述給定程式碼的工作原理 −

將上述給定的 HTML 程式碼儲存在 *@each_multiple_map.html* 檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示輸出，如下所示。

sass_control_directives_expressions.htm

列印頁面

上一個

下一個