我不得不使用+isolate-gridSusy mixin 来纠正一些亚像素舍入问题，并让 4 个图块显示在缩略图库网格的一行中。
现在我面临一个问题+isolate-grid。似乎当我在文件的默认移动样式部分申请+isolate-grid(2,4)时，它弄乱了我的另外两个断点：和。.tilestyle.sasstabletdesktop
移动默认状态下的平铺网格看起来不错：
移动（默认）
但是desktop和tablet状态中的瓦片网格并不一致。每行应该有三个瓷砖。现在它看起来很随机：
药片
桌面
如果我用我的默认移动样式替换+isolate-grid(2,4)为+span-columns(2)in 。.tile然后tabletanddesktop状态工作正常，但在移动状态下每行只有一个图块。每行应该有 2 个图块：
移动（默认）
药片
桌面
这是代码：
@import compass
@import susy
@import normalize
$total-columns : 4
$column-width : 60px
$gutter-width : 20px
$grid-padding : $gutter-width
$container-style: fluid
$tablet : 9
$desktop : 14
// Susy-grid-background override to draw out horizontal lines
=susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
img
width: 100%
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgb(0,20,200)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
p
+leader(1)
+trailer(1)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
/* 5 Column Layout */
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* ------------------- BREAKPOINTS ---------------------------- */
/* ------------------- MOBILE (default) ------------------------*/
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(1)
background: red
.navicon
+span-columns(1)
background: green
.pagenav
+span-columns(4)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(4)
margin-top: 1em
background: rgba(1,240,200,.3)
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* Here is where the problem happens ..............................................*/
/* +isolate-grid(2,4) messes up the tile flow in the tablet and desktop states.....*/
/* +span-columns(2) messes up the tile flow in the mobile state....................*/
.tile
+isolate-grid(2, 4)
// +span-columns(2)
height: 206px
margin-bottom: 1em
background: cyan
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.tile_title
+adjust-font-size-to(15px)
+adjust-leading-to(1, 15px)
background: #af6
.tile_use
@extend .tile_title
+adjust-font-size-to(10px)
+adjust-leading-to(1, 10px)
/* ------------------- TABLET ----------------------------------*/
+at-breakpoint($tablet)
.page
+container
+susy-grid-background
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.navicon
+span-columns(1 omega)
background: green
.pagenav
+span-columns(2 omega,9)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(9)
margin-top: 1em
img
+span-columns(7, 9)
.tile
+isolate-grid(3, 9)
height: 304px
margin-bottom: 1em
background: cyan
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
/* -------------------DESKTOP ----------------------------------*/
+at-breakpoint($desktop)
.page
+container
+susy-grid-background
header
+container
position: fixed
left: 0
right: 0
top: 0
height: 0
z-index: 3
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(150,200,250,.3)
.main
+span-columns(12 omega)
+leader(2)
z-index: 1
position: relative
background: rgba(1,240,200,.3)
img
+span-columns(10, 14)
.tile
+isolate-grid(4, 12)
height: 304px
margin-bottom: 1em
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)