singularitygs - 奇点网格系统排水沟

Question

我试图不仅在列之间而且在布局的左右两边都有排水沟。有没有办法使用 add-gutter 功能做到这一点？

Answer 1

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

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

这并不意味着 Singularity 在功能上受到限制。当你确实需要一些脚手架时，你可以自由地建造一些。

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

出于您的目的，有一个gutter-span()函数可以返回相对于容器宽度的排水沟宽度。

萨斯：

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