使用 Susy 定位元素答案

【问题标题】：Position elements with Susy使用 Susy 定位元素
【发布时间】：2014-07-18 07:22:22
【问题描述】：

我有一堆用 HTML5 定义的文章，如下所示：

    <section class="applications">
        <article>
            <a href="..."><img ... /></a>
            <h2>...</h2>
            <p>...</p>
            <a ... class="appstore">...</a>
        </article>

每篇文章都有这些完全相同的元素。使用 Susy 2.x 我试图弄清楚如何放置东西，使图像位于左上角，下方有空白空间（即第 1 列），然后向右，占据其余宽度页面，我有一个垂直布局，其中

高于

高于。

您可以在这张图片中看到我正在寻找的所需格式：

我的样式按我想要的方式工作，但至于布局...我很确定我现在必须使用“@include span”的东西，但是玩了一个小时后我就是不能修正它。谢谢！

【问题讨论】：

标签： susy-compass susy-sass

【解决方案1】：

您根本必须使用 Susy，但您当然可以。 :)

这是一个非常常见的 CSS 问题，因为我们经常使用浮动来进行布局，而实际上它们并非如此。 Susy 实际上只是一组帮助管理布局数学的快捷方式，但它无法修复 CSS。首先在 CSS 中解决您的布局问题，然后确定 Susy 可以在哪些方面帮助您澄清和简化代码。

例如，以下是 CSS 中的几种可能的解决方案，仅使用浮点数：

// Option A
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  float: right;
  width: 75%;
}

// Option B
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  margin-left: 25%;
}

// Option C
// --------

article {
  padding-left: 25%;
}

.image-link {
  float: left;
  width: 24%;
  margin-left: -25%;
}

会有很多其他解决方案使用绝对定位、额外标记或许多其他方法。您更喜欢哪一个取决于您希望它的工作方式、您对标记的控制程度等。

Susy 的span() mixin 输出一个浮动方向（默认为左，但如果您使用last 关键字则为右）、一个宽度和某种可选的排水沟。 pre()/push()/pull() 和 prefix() mixin 分别设置边距或填充。或者，您可以完全跳过 mixins，并使用 span() 函数在任何您想要的地方进行网格计算。

// Option A
// --------

.image-link {
  @include span(1 of 4);
}

.title, .description, .purchase {
  @include span(last 3 of 4);
}

// Option B
// --------

.image-link {
  float: left;
  width: span(1 of 4);
}

.title, .description, .purchase {
  @include pre(1 of 4);
}

// Option C
// --------

article {
  @include prefix(1 of 4);
}

.image-link {
  @include span(1 of 4);
  @include pull(1 of 4);
}

您还可以使用 Susy 的 isolation 功能，或许多其他方法——所有这些都只是数学和 CSS 的包装器。不要让 Susy 的抽象隐藏了您使用 CSS 工作的事实，而浮点数只是浮点数。

【讨论】：