Question

我正在使用Susy gallery mixin，或者我可以使用span，并且项目的高度不相等。所以我也必须使用砌体，但它总是混淆我的布局。

萨斯：

.item { @include span(3); }

的Javascript

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

之前有人这样做过吗？

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

Answer 1

我回过头来讨论这个问题。如果选中masonry docs，您应该会看到将元素选择器作为columnWidth设置传递给masonry的选项。使用这个你可以告诉砌体你的元素的宽度。我努力的一件事就是使用排水沟。最后，我使用了susy的内部静态方法，并使用内部元素来提供样式。

我把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);
}

如何使用Susy Sass与Masonry布局？

1 个答案: