如何在 Foundation 中创建新的 SASS 变量答案

【问题标题】：How to create a new SASS variable in Foundation如何在 Foundation 中创建新的 SASS 变量
【发布时间】：2014-08-27 02:06:13
【问题描述】：

如何在 Foundation 中创建新的 SASS 变量，例如对于顶栏，我有这些变量：

// Height and margin
// $topbar-height: 45px;
// $topbar-margin-bottom: 0;

如何为上边距创建一个？

谢谢。

【问题讨论】：

【解决方案1】：

引用Sass Documentation:

使用 SassScript 最直接的方法是使用变量。变量以 > 美元符号开头，并像 CSS 属性一样设置：
$width: 5em;
然后您可以在属性中引用它们：
#main {
 width: $width;
}

如果您不确定变量是如何工作的，您可能应该花时间阅读有关 SASS 的官方文档；它将回答您的大部分基本问题。这是一个非常基本的问题。

如果您想创建 any 新变量，并在样式表的其他地方使用它：

首先，您需要设置变量：

// Abstract example
$(variable name): (variable definition);
// Real-life example
$pretty-red: #ff0033;

然后，你需要引用变量：

p#highlight {
    color: $pretty-red;
}

请注意，您可以在变量名中使用下划线或连字符；基金会定义 $their-variables-like-this 的做法不是强制性的，但似乎是相当普遍的做法。

所以，要为上边距创建一个变量，您首先要定义它：

$margin_amount: 40450542052rem;

（尽管如果我是你，我会更改该保证金金额！）然后通过 margin-top 属性或通过 margin 简写来引用它：

div { margin-top: $margin_amount; }
div { margin: $margin_amount 0 0 0;}

【讨论】：