Sass @each多個(gè)分配與映射
2018-12-30 18:26 更新
描述
多重賦值適用于映射，它們被視為對(duì)的列表。如果你想使用map，那么你必須更改@each語(yǔ)句并使用多個(gè)分配。
語(yǔ)句
@each $var1, $var2 in <map>
下面簡(jiǎn)要解釋語(yǔ)法。
$var1, $var2: 這些表示變量的名稱。
<map>: 它表示對(duì)的列表。
例子
下面的示例演示了如何使用多個(gè)分配與映射：
<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>
接下來(lái)，創(chuàng)建文件style.scss。
style.scss
@each $header, $color in (h1: red, h2: green, h3: blue) {
#{$header} {
color: $color;
}
}
您可以通過(guò)使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS：
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來(lái)執(zhí)行上面的命令，它將自動(dòng)創(chuàng)建style.css文件用下面的代碼：
style.css
h1 {
color: red; }
h2 {
color: green; }
h3 {
color: blue; }
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將上述html代碼保存在@ each_multiple_map.html文件中。
在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：