Susy数学调整到特定的布局

时间:2013-09-05 15:52:07

标签: susy-compass

在一个带有Zen子主题的Drupal网站上工作,我为susy抛弃了zen-grid。我一直在玩Susy并且效果很好。但这是我的问题。

我有一个包含两个主要列的布局: #content (包含主要内容;包含三行,四行,宽度为181px的网格)和 div.region-sidebar -second (持有主导航)。

我的设计师提出了一个960px布局,其中#content容器的宽度为750px,然后是8px右边距,div.region-sidebar-second的宽度为202px。

在我的responsive.scss中,我把:

.sidebar-second {
#content {
@include span-columns(9, 12);
}
.region-sidebar-second {
@include span-columns(3 omega, 12);
}
}

因此#content使用前9列,而.region-sidebar-second使用最后3列。但这并没有转化为750px / 8px / 202px。

当然,susy计算的百分比是正确的,但对于我的布局,我需要Susy来计算不同的百分比。

E.g。 Susy计算#content

.sidebar-second #content {
float: left;
margin-right: 1.40845%;
width: 74.6479%;
}

.sidebar-second .region-sidebar-second {
float: right;
margin-right: 0;
width: 23.9437%;
}

为了满足设计要求,我需要宽度:#content为78.125%,margin-right为.833333%,宽度为:.region-sidebar-second为21.0416666%

不确定这是否可以通过Susy span-columns实现。如果你有一个快速的想法,这将非常感激。感谢。

0 个答案:

没有答案