كيف يمكنني استخدام 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();
        }
    }
}