我试图查看Susy上的调试模式,以了解网格的工作方式并确定我们是否有问题,但是当我将其添加到susy-config中时,它没有显示调试模式。
我正在使用2.2.12版。这是我在_variables.scss上的代码:
$susy: (
column-width: 45px,
columns: 12,
container-position: center,
container: auto,
global-box-sizing: border-box,
gutter-position: after,
gutters: 18px / 45px,
math: static,
output: isolate,
debug: (
image: show,
color: rgba($debugg-color, .2),
output: background,
)
);
$susy-desktop: (
column-width: 67px,
columns: 12,
container-position: center,
container: auto,
global-box-sizing: border-box,
gutter-position: after,
gutters: 30px / 67px,
math: static,
output: isolate,
debug: (
image: show,
color: rgba($debugg-color, .2),
output: background,
)
);
Image of the full Grid without the debug mode以及添加了
margin-top: -100%
的按钮,因为我们使用的是output: isolate
。我们希望第一个按钮为
span(2 at 8)
,第二个按钮为span(2 at 10)
。网格覆盖是Chrome插件(不是Susy调试模式),如您所见,该插件无法按需工作。
我在按钮中使用了这个Sass:
.btn--full {
@include span(2 at 8);
margin-bottom: 28px;
&.btn--ghost-darkgrey {
@include span(2 at 10);
}
}
This is the representation of the buttons without
gutter-position: isolate
and math: fluid, output: float
所以我们有这个问题:
我们可以看到Susy的调试模式。
如果使用隔离模式,则按钮会断开
最佳答案
在您的CodePen示例中,调试模式似乎正常工作。我分叉了,然后added a sample $desktop
breakpoint。
隔离是约翰·阿尔宾·威尔金斯(John Albin Wilkins)使用负右边界to help avoid sub-pixel rounding errors开发的一种技术。隔离从自然流中删除元素,因此,如果在给定上下文中隔离所有元素,则效果最佳。您可以通过以下几种方法解决该问题:隔离所有段落以使它们不重叠,或者在按钮段落上使用last
(而不是隔离)使按钮向右浮动。
在不了解标记限制或所需外观的情况下,很难更加具体。
让我知道是否错过了什么。
关于css - Susy Grid系统上 Debug模式和隔离装订线位置的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45007225/