Responsive Sass

structure.html

<h2>A thumbnail grid with <a href="https://github.com/Team-Sass/Singularity">Singularity</a> and <a href="https://github.com/lolmaus/breakpoint-slicer">Breakpoint Slicer</a></h2>
<p>Play with the Page pane width to see the responsive magic!</p>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

<div class=grid-item>
  <div class=thumbnail>
    <div class=thumbnail-content>
      Thumbnail
    </div>
  </div>
</div>

style.sass

@import singularitygs
@import breakpoint-slicer
@import toolkit

// Setting breakpoint slices
$slicer-breakpoints: 0 400px 600px 800px 1050px
// Slice numbers:    | 1 | 2  |  3  |  4  |  5  →


// Setting the grid for the smallest slice
$grids: 1

// Cycling through slices starting with the 2nd
@for $i from 2 through total-slices()

  // Addid a grid definition for each slice
  // The number of columns in each grid is equal to the slice's number
  $grids: add-grid($i at bp($i))

body
  margin: 0 auto
  max-width: 1000px
   
.grid-item
  background-color: pink
  min-height: 6em
  margin-bottom: 2em
  
  // Setting a breakpoint for every slice
  @for $slice from 2 through total-slices()
    +at($slice)
    
      // Spanning thumbnails for each position in grid
      @for $column from 1 through $slice

        // Span thumbnails in this column
        &:nth-of-type(#{$slice}n+#{$column})
          +grid-span(1, $column, $output-style: float)
          
  .thumbnail
    +intrinsic-ratio(4/3)

~sassbin-config.json

{
    "html": {
        "visible": false
    },
    "sass": {
        "visible": true,
        "left": "0%",
        "right": "50%",
        "wrap": true
    },
    "css": {
        "visible": false
    },
    "page": {
        "visible": true,
        "left": "50%",
        "right": "0%"
    },
    "css-flavor": "expanded"
}