Susy를 사용하여 다양한 페이지에 다양한 레이아웃을 생성하려면 어떻게 해야 합니까?

Question

저는 Susy 2.1.3을 그리드 시스템으로 사용하고 있습니다.다른 템플릿에 다른 여백이 있는 포함 요소가 있습니다.두 가지 다른 레이아웃을 선언했는데 올바르게 호출하고 있다고 생각합니다.그러나 마지막에 정의된 레이아웃은 모든 곳에 적용되는 레이아웃입니다.아래 코드에서는 $onepx-gutters 레이아웃이 적용됩니다. .home 페이지.

내 SCSS 코드는 다음과 매우 유사합니다.

$small-gutters : (
    columns: 12,
    gutters: 0.137254902,
    output: float,
    gutter-position: split,
    global-box-sizing: border-box,
);

$onepx-gutters : (
    columns: 12,
    gutters: 1px/80px,
    output: float,
    gutter-position: before,
    global-box-sizing: border-box,
);

.home .item-container {
    @include layout($small-gutters);
    @include container();
}

.products .item-container {
    @include layout($onepx-gutters);
    @include container();
}


.item-container .item-width-2 {
    @include span(first 8 of 12);
    &:nth-child(2n+3) {
      clear: both;
    }
}

.item-container .item-width-1 {
    @include span(4 of 12);
}

생성된 CSS 코드는 다음과 유사합니다.

.item-width-2 {
    width: 65.66092%;
    float: left;
    margin-left: 0.50287%;
    margin-right: 0.50287%; }
.item-width-2:nth-child(2n+3) {
    clear: both;
}

.item-width-1 {
    width: 32.32759%;
    float: left;
    margin-left: 0.50287%;
    margin-right: 0.50287%;
}

보시다시피 별도의 인스턴스를 생성하지 않습니다. .home .item-width-2 그리고 .products .item-width-2 각각 다른 마진을 가지고 있습니다.

Answer 1

이름 간격이 아니라 코드 순서를 변경했기 때문에 솔루션이 작동합니다.당신이 사용하는 모든 곳에서 @include layout 다시 변경할 때까지 뒤에 오는 모든 코드에 대한 전역 변수를 변경합니다.몇 가지 다른 옵션이 있습니다:

// with-layout 
// - only change the settings for nested code

@include with-layout($onepx-gutters) {
  @include span(3); // this will use $onepx-gutters
}

@include span(3); // this will not


// local context
// - change your settings for any one mixin!

@include span(3 $onepx-gutters); // this will use $onepx-gutters
@include span(3 $small-gutters); // this will use $small-gutters

Answer 2

내가하면 제대로 작동합니다 요소를 수동으로 네임스페이스 지정 다음과 같이 레이아웃을 순서대로 선언합니다.

@mixin item-width-2() {
    @include span(first 8 of 12);
    &:nth-child(2n+3) {
        clear: both;
    }
}

@mixin item-width-1() {
    @include span(4 of 12);
}

.products {
    .item--holder {
        @include layout($onepx-gutters);
        @include container();
    }
    .item {
        &.width-2 {
            @include item-width-2();
        }
        &.width-1 {
            @include item-width-1();
        }
    }
}
.home {
    .item-holder {
        @include layout($small-gutters);
        @include container();
    }
    .item {
        &.width-2 {
            @include item-width-2();
        }
        &.width-1 {
            @include item-width-1();
        }
    }
}