奇點網格系統排水溝

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