특이점 그리드 시스템 거터

Question

나는 열 사이에 도랑이있을뿐 아니라의 왼쪽과 오른쪽도 입니다. 추가 기능을 사용하여 할 수 있습니까?

Answer 1

Singularity는 Susy과 달리 컨테이너 용 스 캐 폴딩을 제공하지 않습니다. 내 개인적인 취향에

, 이것은 큰 장점입니다 : 특이점이없는 중 하나있는 발판을 필요로한다! 그 결과 더 명확하고 이해하기 쉬운 HTML과 CSS를 얻을 수 있습니다.

이것은 Singularity의 기능이 제한적이라는 의미는 아닙니다. 비계를 필요로 할 때, 당신은 자유롭게 건설 할 수 있습니다. 당신의 목적을 위해 https://github.com/Team-Sass/Singularity/wiki/Grid-Helpers

는, 컨테이너의 폭에 guttter 상대의 폭을 반환 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%; 
}