Susy cara yang tepat untuk mengganti pengaturan jaringan di breakpoint

Saya mencoba mendefinisikan beberapa perilaku default untuk grid dan kemudian menimpanya pada breakpoint tertentu. Dalam contoh berikut saya ingin kedua div ditumpuk di atas satu sama lain, dengan sedikit modifikasi pengaturan gutter dari default, dan kemudian pada 800px ke atas saya ingin div ditumpuk bersebelahan. Bagian kedua tidak terjadi. Sepertinya beberapa pengaturan margin dari skenario kurang dari 800 piksel diterapkan ke skenario lebih besar dari 800 piksel. Tolong beri tahu saya cara membuat kode ini dan mematuhi praktik terbaik susy.

HTML:

<div class="container">
    <div class="primary">
        <p>I am Primary</p>
    </div>
    <div class="secondary">
        <p>I am Secondary</p>
    </div>
</div>

SCSS:

$susy:
(
  flow: ltr,
  output: float,
  math: fluid,
  column-width: false,
  container: 1200px,
  container-position: center,
  last-flow: to, columns: 12,
  gutters: 1 / 4,
  gutter-position: after,
  global-box-sizing: border-box,
  debug: (
    image: hide,
    color: rgba(#66f, 0.25),
    spot: background, toggle: bottom right)
  );

* {
    @include box-sizing(border-box);
}

.container{
    @include container;
}

.primary{
    background-color: red;
}

.secondary{
    background-color: blue;
}

// Mobile first layout with slightly different
// gutter settings from default
@include with-layout(12 0.5 split){

    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

// this layout should take over at 800px and above
// and share a row but instead boxes end up on different
// rows
@include susy-breakpoint(800px, $susy)
{
    .primary{
        @include span(first 6);
    }

    .secondary{
        @include span(last 6);
    }
}

Saya juga membuat contoh codepen yang dapat ditemukan di sini:

http://codepen.io/sbonham/pen/vLKvMJ


css responsive-design sass breakpoint-sass susy-sass
person sbham    schedule 22.12.2015    source sumber

Jawaban (2)


arrow_upward
0
arrow_downward

Ya, Susy hanya menulis nilai CSS, jadi Anda harus menanganinya dengan cara yang sama seperti dengan CSS biasa. Susy tidak mengetahui DOM Anda, jadi tidak ada cara untuk mengetahui bahwa Anda ingin mengganti nilai yang Anda tetapkan sebelumnya. Jika kami berasumsi Anda selalu ingin mengganti, kami harus mengeluarkan kode yang sangat besar.

Ada dua solusi di sini:

  • Letakkan tata letak layar kecil Anda di dalam max-width media-query, sehingga tidak memengaruhi layar yang lebih besar.
  • Atau: ganti nilai-nilai global tersebut di dalam media-query layar besar. Masalah yang harus diperbaiki adalah margin ekstra yang ditambahkan oleh split talang awal Anda.

Saya lebih suka solusi pertama, karena menurut saya penggantian itu jelek. Namun jika Anda berurusan dengan beberapa browser kecil yang tidak mendukung media-query (apakah masih ada?), Anda harus menggunakan solusi kedua. Mencoba:

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}
person Miriam Suzanne    schedule 23.12.2015

arrow_upward
0
arrow_downward

ini sepertinya retasan, tapi semoga Anda mendapatkan sesuatu dari ini! Saya menambahkan yang berikut ke codepen Anda:

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

http://codepen.io/alexG53090/pen/wMWNzR

person alex bennett    schedule 23.12.2015