我如何创建“图库"?有奇异吗? [英] How can I create a "gallery" with singularitygs?

问题描述

我正在尝试在网站的页脚中创建一个小型画廊.目前，以下Sass确实有效，但是在每个类上使用 one ， two 和 3 类似乎效率不高.footer_block，但我根本看不到另一种方式.

I'm trying to create a small gallery in the footer of my site. At the moment, the following Sass does actually work but it doesn't seem very efficient to use the one, two and three classes on each footer_block but I simply can't see another way of doing this.

本质上，我有一个嵌套在不对称网格中的对称网格，并且想对这三个footer_block项中的每一个重复相同的网格跨度调用，但是未能弄清楚该怎么做.

Essentially I have a symmetrical grid nested inside an asymmetrical grid and would like to repeat the same grid-span call for each of the three footer_block items but have failed to figure out how.

Sass看起来像:

.region--footer {
  color: $color__background--dark;
  border: {
    top: 1px solid $base-ui-color;
  }
  font-family: $secondary-font-family;
  font-size: $font-size-sm;
  .content {
    padding: {
      bottom: em(32px, $font-size-sm);
      top: em(32px, $font-size-sm);
    }
    @extend .cf;
    @include add-grid(4 10 3);
    @include add-gutter(1/4);
    @include add-gutter-style('split');
  }
}

.footer__blocks {
  @extend .cf;
  @include grid-span(1, 2);
  @include layout(3, $gutter: 0) {
    .footer__block {
      @include grid-span(1, 1);
    }
    .footer__block.two {
      @include grid-span(1, 2);
    }
    .footer__block.three {
      @include grid-span(1, 3);
    }
  }
}

HTML如下:

<footer class="region--footer">
  <div class="content">
    <div class="footer__blocks">
      <div class="footer__block one">
        <img src="image.jpg">
    </div>
      <div class="footer__block two">
        <img src="image.jpg">
      </div>
      <div class="footer__block three">
      <img src="image.jpg">
      </div>
    </div>
  </div>
</footer>

预先感谢

推荐答案

浮动范围

这是一个解决方案:

Float span

Here's a solution:

.footer__blocks {
  @include grid-span(1, 2);

  $cols: 3;

  @include layout($cols, $gutter: 0) {
    .footer__block {
      @include float-span(1);
      &:nth-child(#{$cols}n+#{$cols}) {
        @include float-span(1, 'last');
      }
    }
  }
}

演示: http://sassmeister.com/gist/5dab07e1ab0b861e4b4a

1. 我们使用 float-span(1)在对称网格中跨项目.它使我们可以对所有项目使用相同的定义，而不是为每个项目应用唯一的位置.
2. 每行的最后一项应没有右装订线.& :: nth-child(3n + 3)选择器定位所有行中的每三个项目.我们应用 float-span(1，'last')，告诉奇点不要添加右边距.

1. We use float-span(1) to span items in a symmetrical grid. It allows us to use the same definition for all items, rather than applying a unique position for every item.
2. The last item in each row should have no right gutter. The &:nth-child(3n+3) selector targets every third item in all rows. We apply a float-span(1, 'last'), telling Singularity not to add right margin.

奇点快速扳手

您还可以使用我的 singularity-quick-spanner 扩展来简化操作更深入.它使您只需一行代码即可达到与上述相同的结果:

Singularity Quick Spanner

You can also make use of my singularity-quick-spanner extension to simplify things even further. It lets you achieve the same result as above with a single line of code:

.footer__blocks {
  @include grid-span(1, 2);

  @include layout(3, $gutter: 0) {
    .footer__block {
      @include thumb-span(3); // Magic! :D
    }
  }
}

演示: http://sassmeister.com/gist/c2c4ab643165c9da2526

这篇关于我如何创建“图库"?有奇异吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！