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

Question

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

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

我怎样才能为上边距创建一个？

感谢。

Answer 1

引用Sass Documentation：

  

使用SassScript最直接的方法是使用变量。变量以＆gt;开头。美元符号，并设置为CSS属性：

$width: 5em;

     

然后您可以在属性中引用它们：

#main {
 width: $width;
}

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

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

首先，您需要设置变量：

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

然后，您需要引用变量：

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

请注意，您可以在变量名称中使用下划线或连字符;定义$他们的变量的基础实践 - 这不是强制性的，但似乎是一种相当普遍的做法。

因此，要为上边距创建变量，首先要定义它：

$margin_amount: 40450542052rem;

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

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