Question

我有两个sass变量，用于设置不同的边距值集，如下所示：

$variable-big: 2.5rem 1rem 1.8rem 1.2rem;

$variable-small: 1.1rem 0.7rem 0.7rem 0.1rem;

我是设计背景中的新手sass用户，所以如果我在描述我的问题时得到错误的术语，请耐心等待我，我只是对其他用户可能显而易见的事情感到愚蠢。

我希望能够有一个新变量来计算两组值之间的差异。

所以这样......

$variable-difference: $variable-big - $variable-small

这样我就可以像这样使用它了

.spacer-top {
margin: $variable-difference;
}

输出：

.spacer-top {
margin: 1.4rem 0.3rem 1.1rem 0.1rem;
}

我一直在努力阅读如何做到这一点，并尝试了各种各样的事情，但收效甚微：

$variable-difference: $variable-big - $variable-small

返回：保证金：2.5rem 1rem 1.8rem 1.2rem-1.1rem 0.7rem 0.7rem 0.1rem;

$variable-difference: ($variable-big) - ($variable-small)

返回相同：margin：2.5rem 1rem 1.8rem 1.2rem-1.1rem 0.7rem 0.7rem 0.1rem;

$variable-difference: ($variable-big - $variable-small)

相同：保证金：2.5rem 1rem 1.8rem 1.2rem-1.1rem 0.7rem 0.7rem 0.1rem;

 $variable-difference: (#{$variable-big} - #{$variable-small})

相同：保证金：2.5rem 1rem 1.8rem 1.2rem-1.1rem 0.7rem 0.7rem 0.1rem;

不言而喻，我不知道自己在做什么。任何帮助赞赏！

Answer 1

由于这些变量实际上是列表，您可以使用nth(<list>, <index>)函数来检索列表中的^th元素（Doc）

$variable-big: 2.5rem 1rem 1.8rem 1.2rem;
$variable-small: 1.1rem 0.7rem 0.7rem 0.1rem;


div {
   margin: 
   nth($variable-big, 1) - nth($variable-small, 1)
   nth($variable-big, 2) - nth($variable-small, 2)
   nth($variable-big, 3) - nth($variable-small, 3)
   nth($variable-big, 4) - nth($variable-small, 4);
}


/* Output

div {
    margin: 1.4rem 0.3rem 1.1rem 1.1rem;
}
*/

SassMeister demo

Hugo Giraudel对名单in this article的进一步参考

使用具有多个值

1 个答案: