Susy: Làm thế nào để mở rộng hộp nội dung để bao gồm lưới đệm là tốt?

Question

Tôi mới bắt đầu chơi với Susy. Tôi có một lưới 12 cột có lưới đệm trên đó. Bây giờ tôi muốn tiêu đề của trang của tôi để mở rộng toàn bộ lưới bao gồm cả lưới-padding. Những gì tôi đang làm bây giờ là tính toán chiều rộng tổng thể và sau đó thiết lập một lề tiêu cực trên tiêu đề. Đó là cảm thấy khá hacky với tôi ... Có cách nào sạch hơn để làm điều đó?

$total-columns : 12; 
$column-width : 3.5em; 
$gutter-width : 1.25em; 
$grid-padding : 2em; 

$total-width: ($total-columns * ($column-width + $gutter-width)) + (2 * $grid-padding) - $gutter-width; 

header { 
    height: 150px; 
    width: $total-width; 
    margin-left: -$grid-padding; 
} 

Answer 1

Bạn có hai lựa chọn tốt. Một là một phiên bản đơn giản của những gì bạn có. Vì các phần tử khối là 100% chiều rộng theo mặc định, bạn có thể chỉ cần loại bỏ thiết lập chiều rộng của bạn (và tất cả các phép toán hacky).

header { 
    height: 150px; 
    margin: 0 0 - $grid-padding; 
} 

Tùy chọn khác của bạn là sử dụng nhiều vùng chứa trên trang. Điều đó đòi hỏi một sự thay đổi để đánh dấu, nhưng đôi khi đó là một sự đơn giản hóa hoạt động tốt. Nếu bạn di chuyển tiêu đề ra ngoài vùng chứa hiện tại của mình và khai báo nó dưới dạng vùng chứa của nó, điều đó sẽ thực hiện thủ thuật.

(như một mặt lưu ý:. Nếu bạn cần đầy đủ chiều rộng bao giờ hết, bạn chỉ có thể sử dụng columns-width() chức năng (đối với chiều rộng bên trong, mà không cần đệm) hoặc container-outer-width() cho toàn bộ chiều rộng bao gồm cả đệm)

UPDATE:

tôi đã sử dụng mixin này, để áp dụng chảy máu bất cứ nơi nào tôi cần nó:

@mixin bleed($padding: $grid-padding, $sides: left right) { 
    @if $sides == 'all' { 
    margin: - $padding; 
    padding: $padding; 
    } @else { 
    @each $side in $sides { 
     margin-#{$side}: - $padding; 
     padding-#{$side}: $padding; 
    } 
    } 
} 

Một số ví dụ:

#header { @include bleed; } 
#nav { @include bleed($sides: left); } 
#main { @include bleed($sides: right); } 
#footer { @include bleed(space(3)); }