Sass 国旗在哪里?
有一个网格跨度(12) 有两个文本块Sass 国旗在哪里?,sass,susy,susy-sass,Sass,Susy,Susy Sass,有一个网格跨度(12) 有两个文本块 .main-container .content text text text text text text text text text .sidebar text text text text text text text text text 想这样做吗 编写代码 span(6 at 1) // span(3 as 9) // 但不要被期望。这是全部代码 $debug: (image: show, color: rgba(#6
.main-container
.content text text text text text text text text text
.sidebar text text text text text text text text text
想这样做吗
编写代码
span(6 at 1) //
span(3 as 9) //
但不要被期望。这是全部代码
$debug: (image: show, color: rgba(#66f, .25), output: background, toggle: top right)
$susy: (columns: 12, gutters: 1/4, math: fluid, gutter-position: inside, debug: $debug)
.main-container
@include container(80%)
.content
width: 100%
height: 100%
@include span(6 at 1)
.sidebar
width: 100%
height: 100%
@include span(3 at 9)
我认为处的旗帜正是为了这个目的而设计的。但实验表明我错了。关于此问题-如何使用位于的标志
?如何使用at
?以这种方式将at
标志用于隔离输出(“输出”:“隔离”
)。这是因为浮动是相对的,Susy不知道它们的原始位置,除非您将它们隔离。隔离在某些情况下很有用,但最好在需要时使用push
和pull
将浮动元素移动到相对位置。大概是这样的:
.content {
height: 100%;
@include span(6);
@inlcude push(1);
}
.sidebar {
height: 100%;
@include span(3);
@include push(1);
}
.content {
height: 100%;
@include span(isolate 6 at 2); // position is 1-indexed
}
.sidebar {
height: 100%;
@include span(isolate 3 at 9);
}
如果您确实使用隔离,它将是这样的:
.content {
height: 100%;
@include span(6);
@inlcude push(1);
}
.sidebar {
height: 100%;
@include span(3);
@include push(1);
}
.content {
height: 100%;
@include span(isolate 6 at 2); // position is 1-indexed
}
.sidebar {
height: 100%;
@include span(isolate 3 at 9);
}
我删除了width:100%
,因为span
无论如何都会覆盖宽度