컴퍼스와 청사진으로 패딩 박스 믹스 작성

Question

인터페이스는 다음과 같아야합니다.

+box(optional_padding_value_in_columns) 

그리드가 깨져서는 안됩니다. (7 단위에 걸쳐있는 열에 배치하면 상자는 7 단위 내에 있어야합니다.)

컴퍼스 _scaffolding.sass에는 실제로이 작은 숫자가 포함됩니다.

// Mixin +box to create a padded box inside a column. 
=box 
    :padding 1.5em 
    :margin-bottom 1.5em 
    :background #E5ECF9 

그러나 패딩이 그리드를 폭파시킵니다.

Answer 1

이 시도 :

// You can supply one padding value or all 4 
=padded_column(!n, !p1, !p2=!p1, !p3=!p1, !p4=!p1) 
    +column(!n) 
    :padding= !p1 !p2 !p3 !p4 
    !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) - !p2 - !p4 

.padded_box 
    +padded_column(!two_columns_secondary, 10px, 0, 5px, 15px) 
    :background #f0f0f0 

Answer 2

의 + 믹스 인 박스는 컬럼 내에서 사용하는 블록 요소 의미한다. 1.5em 패딩은 청사진 열 너비에 비례하지 않으므로 열 요소에 배치하면 레이아웃이 손상됩니다.