如何与 Susy 有动态的左边距？答案

【问题标题】：How to have dynamic left-margin with Susy?如何与 Susy 有动态的左边距？
【发布时间】：2013-04-18 05:25:08
【问题描述】：

我正在玩这个 HTML 中 .logo 的定位：

 <div class="mod-header">
   <a class="logo" href="#"></a>
 </div>

徽标宽度是固定的，但我想知道是否应该让 margin-left 调整到屏幕尺寸。

我在 Susy 上试过这个，这使得 .logo 宽度固定：

.logo
  text-indent: -9999px
  float: left
  +rem('width', 120px)
  +rem('margin', 20px 0)
  // margin-left: $column-width

但是，这不会调整左边距。当我尝试时：

 .logo
   @include span-columns(3,12)

正在进行一些调整，但它是关于宽度，而不是左边距。

我将如何处理这种固定宽度的左边距调整？

【问题讨论】：

【解决方案1】：

这似乎有效：

.logo
  width: 120px
  margin-left: gutter(12) + columns(2,12)

【讨论】：

那行得通。列 + 装订线有一个快捷方式，称为空格（例如 space(2,12)）。但是处理margins 的时间更短——在这种情况下，您可以使用@include pre(2,12) 或@include push(2,12)（它们是同义词）。