奇点网格系统排水沟

Question

我试图不仅在列之间设置排水沟，而且还要设置布局的左右两侧。 有没有办法使用add-gutter函数？

Answer 1

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

就我个人而言，这是一个很大的优势：Singularity不会要求任何脚手架！结果是更清晰，更易理解的HTML和CSS。

这并不意味着Singularity的功能有限。当你需要一些脚手架时，你可以自由地建造一些脚手架。

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

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

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%;
}