如何将 Susy Sass 与 Masonry 布局一起使用？

Question

我正在使用 Susy Gallery mixin，或者我可以只使用 span，并且项目的高度不相等。所以我也必须使用 Masonry，但它总是会弄乱我的布局。

萨斯：

.item { @include span(3); }

Javascript

var msnry = new Masonry( 'div.home', {
    itemSelector: '.item'
});

以前有人做过吗？

这是我正在使用的砌体脚本：http://masonry.desandro.com/

Answer 1

我不久前遇到了这个问题。如果您检查masonry docs，您应该会看到将元素选择器作为 columnWidth 设置传递给砌体的选项。使用这个你可以让 susy 告诉 masonry 你的元素的宽度。我挣扎的一件事是使用排水沟。最后我使用了 susy 的 inside-static 方法，并使用内部元素来提供样式。

我整理了一个basic codepen，应该有助于解释事情。下面是scss供参考。

@import "susy";

//
// Converts a px value to EMs
// @param  {number} $px    px value to convert to EMs
// @param  {number} $base  The base pixel value to divide by. Defaults to $base-font-size
// @return {number}        returns em value
//
@function toEm($px, $base: $base-font-size) {
    @return ($px / $base) * 1em;
}


$base-font-size: 13px;

$susy : layout(12 (toEm(70px) toEm(20px)) inside-static ) !global;

@include border-box-sizing;

.container {
  @include container;
  font-size: $base-font-size;
}

// A gutterless item.
.item {
  @include border-radius(5px);
  @include span(3);
  background: #d26;
  border: 2px solid rgba(#333,0.25);
  height: 40px;
  margin-left:0;
  margin-right:0;
}

// an item with gutters should have styling placed in .inner elements
.item-gutter {
  @include span(3);
  margin-bottom: gutter();
  margin-left:0;
  margin-right:0;
  margin-top: gutter();
}

.item-gutter .inner {
  @include border-radius(5px);
  background: #d26;
  border: 2px solid rgba(#333,0.25);
  display: block;
  height: 40px;
}

.item.w2,
.item-gutter.w2 {
  width: span(6);
}

.item.w3,
.item-gutter.w3 {
  width: span(9);
}

.item.h2,
.item-gutter.h2 .inner {
  height: 80px;
}
.item.h3,
.item-gutter.h3 .inner {
  height: 120px;
}

// this element is used by masonry to understand the width of a single column
.grid-sizer {
  width: span(3);
}