如何在当前的SASS地图/词典中引用另一个值?

时间:2019-11-15 20:28:56

标签: dictionary sass scss-mixins

我有一个SASS颜色图,我希望某些颜色仅引用该图中的另一种颜色。

例如

map-get($colors, red)

但是,当我运行此命令时,special-red的值实际上是#a82523。我希望该值为 onMove(draggable) { const sortedDraggables = this.getSortedDraggables() const pinnedPositions = sortedDraggables.map((draggable) => draggable.pinnedPosition) const currentIndex = sortedDraggables.indexOf(draggable) const targetIndex = indexOfNearestPoint(pinnedPositions, draggable.position, this.options.radius, getYDifference) if (targetIndex !== -1 && currentIndex !== targetIndex) { arrayMove(sortedDraggables, currentIndex, targetIndex) this.bubling(sortedDraggables, draggable) } } bubling(sortedDraggables, currentDraggable) { const currentPosition = this.startPosition.clone() sortedDraggables.forEach((draggable) => { if (!draggable.pinnedPosition.compare(currentPosition)) { if (draggable === currentDraggable && !currentDraggable.nativeDragAndDrop) { draggable.pinnedPosition = currentPosition.clone() } else { draggable.pinPosition(currentPosition, (draggable === currentDraggable) ? 0 : this.options.timeExcange) } } currentPosition.y = currentPosition.y + draggable.getSize().y + this.verticalGap }) }

您如何做到的?

1 个答案:

答案 0 :(得分:1)

无法对地图进行事件初始化时添加键。您可以将值分配给变量$ special-red:#a82523;然后在地图中分配

$special-red: #a82523;
$colors: (
     special-red: $special-red,
     red: $special-red
)

但是,如果您确实想这样做,则可以创建一个mixin并通过它进行查找

$colors: (
    special-red: #009CDC,
    red: special-red
);

@mixin themeColor1($color) {
  $mapColor: map-get($colors, $color);
  @if map-has($mapColor) {
    color: map-get($colors, $mapColor)
  } @else {
    color: map-get($colors, $color)
  }
}

.my-class {
  @include themeColor1(red);
}

.my-class2 {
  color: map-get($colors, special-red);
}

但是我的建议是方法1,设置变量