是否有可能以像素而不是%返回@include span(3 of 12)
?
我想创建一个方形元素,我想让这个元素的高度等于它的宽度。
.myElement {
width: span(3 of 12)
height: span(3 of 12)
}
当然,这会导致高度为%,这实际上是其父容器的%,所以它不等于宽度!什么好主意吗?
并非完全不可能-只是有点棘手(如果你想要一个流动的正方形)。
// Static width/height is simple
.square-a {
@include span(2 static);
height: span(2 static);
}
// Fluid takes a bit more work
.square-b {
@include span(2);
height: 0;
// %-Padding is always relative to parent width
padding-top: span(2);
position: relative;
// Inner element positioned to fit space
span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}