css - SASS/SCSS 中的拆分变量

Question

我有一个如下所示的 SASS 变量:

$surrounding-margin: 0 40px;

我像这样使用它(不相关的属性已被删除):

#content {
  margin: $surrounding-margin;

  & #close {
    margin-right: -$surrounding-margin[1]; // If this was JS.
  }
}

显然，-$surrounding-margin[1] 不起作用。会怎样？我需要变量的第二个值，负数。我怎样才能做到这一点？

Answer 1

只需使用例如nth，因为它只是一个列表:

$surrounding-margin: 0 40px;

#content {
  margin: $surrounding-margin;

  & #close {
    margin-right: -(nth($surrounding-margin, 2));
  }
}