奇点网格系统排水沟

Question

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

Answer 1

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

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

这并不意味着奇点在功能上有限。当你需要一些脚手架时，你可以自由地构建一些脚手架。

不二提供了所有必要的手段：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%; 
}