奇点网格系统排水沟

Question

我试图不仅在列之间，而且在布局的左侧和右侧排水沟。有没有一种方法可以使用add-gutter函数来做到这一点?

Answer 1

与Susy不同，Singularity不为容器提供脚手架。

在我个人看来，这是一个很大的优势:Singularity也不需要任何脚手架!结果是更干净，更容易理解的HTML和CSS。

这并不意味着Singularity在功能上是有限的。当您确实需要一些脚手架时，您可以自由地构建一些。

Singularity提供了所有必要的工具:https://github.com/Team-Sass/Singularity/wiki/Grid-Helpers

对于您的目的，有gutter-span()函数返回水槽的宽度相对于容器的宽度。

SASS:

$grids: 4
$gutters: 0.2
.element
  +float-span(1)
.container
  $grid-padding: gutter-span() / 2 //Adjust as necessary
  padding-left: $grid-padding
  padding-right: $grid-padding

导致的CSS:

.element {
  width: 21.73913%;
  clear: right;
  float: left;
  margin-left: 0%;
  margin-right: 4.34783%;
}
.container {
  padding-left: 2.17391%;
  padding-right: 2.17391%;
}