获取 SASS 变量的水平填充/边距部分

Question

有一个SASS变量定义如下：

$section-padding: 3rem 1.5rem !default

然后在其他地方用作填充值，效果很好：

padding: $section-padding;

如何动态获取1.5rem 值？有没有办法提取它，假设$section-padding 变量总是包含一个速记填充/边距定义？

我无法将值拆分为两个单独的变量，因为 $section-padding 在第三方 CSS 框架 (Bulma) 中是这样定义的。

Answer 1

似乎我走在了正确的轨道上，但在我使用它的 calc() 调用中出现了一个错误，导致它崩溃了。

SASS 有lists 的概念。如果变量包含空格或逗号分隔值，则将其视为列表。然后，您可以使用 nth() 函数（基于 1 的索引）提取所需的部分：

nth($section-padding, 2)

请注意，要在 calc() 中使用它，函数调用应包含在 #{} 中（这是我的错误）：

padding: calc(200px + #{nth($section-padding, 2)});