Sass - @each 多重賦值

說明

使用 $var1、$var2、$var3、... 在 <list> 中，也可以將多個值與 @each 指令一起使用。

語法

@each $var1, $var2, $var3 ... in <list>

語法簡短解釋如下 −

$var1、$var2 和 $var3 − 這些表示變數的名稱。
<list> − 它表示列表的列表，每個變數都將持有子列表的元素。

示例

以下示例演示了將 @each 指令與多個值一起使用 −

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

   <body>
      <p class = "aqua">This is line one.</p>
      <p class = "red">This is line two.</p>
      <p class = "green">This is line three.</p>
   </body>
</html>

接下來，建立檔案 style.scss。

style.scss

@each $color, $border in (aqua, dotted), (red, solid), (green, double){
   .#{$color} {
      background-color : $color;
      border: $border;
   }
}

您可以透過使用以下命令告訴 SASS 監視檔案並在 SASS 檔案更改時更新 CSS −

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

接下來，執行上述命令；它將使用以下程式碼自動建立 style.css 檔案 −

style.css

.aqua {
   background-color: aqua;
   border: dotted;
}

.red {
   background-color: red;
   border: solid; 
}

.green {
   background-color: green;
   border: double;
}

輸出

讓我們執行以下步驟，瞭解上面給出的程式碼如何工作 −

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

sass_control_directives_expressions.htm

列印頁面

前一個

下一個