<div class="container">
  <div data-span="3">span</div>
</div>

// 3 個尺寸的設定檔
$mobile: (
  'min-width': 0px,
  'columns': susy-repeat(4),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

$pad: (
  'min-width': 800px,
  'columns': susy-repeat(8),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

$desktop: (
  'min-width': 1280px,
  'columns': susy-repeat(12),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

// container 因為尺寸不同，柵欄也會不同
.container {
    @include susy-breakpoint($mobile) {
        background: svg-grid() no-repeat scroll;
        height: 100%;
    }
    @include susy-breakpoint($pad) {
        background: svg-grid() no-repeat scroll;
    }
    @include susy-breakpoint($desktop) {
        background: svg-grid() no-repeat scroll;
    }
}

// 讓元素在不同尺寸顯示不同樣式
[data-span] {
    @include susy-breakpoint($mobile) {
        // 手機樣式
        background: #ff0000ab;
        line-height: 10rem;
        text-align: center;
        color: white;
        font-size: 5rem;
    }
    @include susy-breakpoint($pad) {
        // 平板樣式
        background: #52b752;
    }
    @include susy-breakpoint($desktop) {
        // 桌電樣式
        background: #6666d0;
    }
}