Question

我有一个非常长的sass地图，作为片段是（full code in Codepen）：

$pbcolors: (

pbcyan : (
50:  #E5F5FC,
100: #CCEBF9,
200: #99D7F2,
300: #66C3EC,
400: #33AFE5,
500: #009DBF,
600: #008CAB,
700: #007C98,
800: #006D85,
900: #005D72
),
pbmediumblue: (
50:  #E5F1F8,
100: #CCE3F1,
200: #99C7E3,
300: #66AAD4,
400: #338EC6,
500: #0072B8,
600: #0065A5,
700: #005A93,
800: #004F80,
900: #00436E
),
pbpurple: (
50:  #F5ECF5,
100: #ECD9EB,
200: #D9B2D7,
300: #C68CC3,
400: #B365AF,
500: #A03F9B,
600: #90388B,
700: #80327C,
800: #702C6C,
900: #60255D
);

我正在尝试编写一个循环来创建一系列以颜色和阴影命名的类，其中bg颜色为十六进制，如此

.bg-pbmediumblue-100 { background: #CCE3F1; }

但是，我的语法必须打破，因为我没有跳到第二级：

@each $item, $color in $pbcolors {
  @each $shade, $value in $item {
    .bg-#{$shade}-#{$shade} {
      background-color: map-get(map-get($pbcolors, $item), 50);
    }
  }
}

从这里我只得到每种颜色的50，以及错误的类名：

.bg-pbcyan-pbcyan {
   background-color: #E5F5FC;
 }

.bg-pbmediumblue-pbmediumblue {
   background-color: #E5F1F8;
 }

我搞砸了什么？

Answer 1

您引用了错误的变量。 $item变量（第一个）引用映射键名称，而不是值（第二个）。您需要迭代内循环中的值。

@each $item, $color in $pbcolors {
  @each $shade, $value in $color {
    .bg-#{$item}-#{$shade} {
      background-color: $value;
    }
  }
}

Answer 2

虽然我仍然喜欢知道如何制作这个循环，但我最后使用了一个函数，我们可以在需要时调用它们，而不是将它们全部打印出来，无论是否需要。

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns:t="sap.ui.table"
      xmlns="sap.ui.commons"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:TreeTable id="tbl" rows="{path:'/',parameters:{arrayNames:['data']}}" visibleRowCount="10">
            <t:columns>
                <t:Column>
                    <t:label><Label text="name" /></t:label>
                    <t:template><TextView text="{name}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="description" /></t:label>
                    <t:template><TextView text="{description}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="" /></t:label>
                    <t:template><Button text="Add child node" press="addNode"/></t:template>
                </t:Column>
            </t:columns>
        </t:TreeTable>
    </mvc:View>
</script>

<div id="uiArea"></div>

这样，按需获取颜色很简单：

@function pbcolor($pbcolor, $tone: 500) {
   @return map-get(map-get($pbcolors, $pbcolor), $tone);
}

甚至

.oneway {
  color: pbcolor(pbcyan, 500);
 }

获取默认的500色。

Sass地图循环可能性

2 个答案: