Mengambil Bourbon rapi Mixins ke tingkat berikutnya

() translation by (you can also view the original English article)

Sekarang bahwa Anda memiliki dasar-dasar di bawah ikat pinggang Anda, dalam tutorial ini kedua tentang rapi mixins saya akan menyelam sedikit lebih dalam, menjelajahi beberapa mixins lain dan memperkenalkan fungsi.

Kita akan Perhatikan hal berikut:

Fungsi

Baru-breakpoint

Mixins

Reset-tata letak-arah
Arah-konteks
Tampilan-konteks
Reset-tampilan
mengisi-induk
Reset-semua
Media
baris

Media

Selama beberapa tahun, pentingnya desain fleksibel yang menanggapi pemandangan yang terus berkembang dari ukuran layar dan perangkat, telah dibuat cukup jelas. Dalam pengertian ini, rapi Bourbon memiliki punggung, menyediakan Anda dengan pendekatan elegan untuk mengelola media query untuk grids Anda. Melalui penggunaan query media ditargetkan pintar, tata letak Anda dapat disesuaikan untuk berbagai perangkat tanpa membuat berantakan. Desain responsif di sini untuk tinggal dan penggunaan media query yang bertanggung jawab dan berkelanjutan adalah raja.

Sesuatu untuk menghindari adalah apa yang Anda sebut query spaghetti — berantakan kusut media query yang dengan cepat menjadi sulit untuk mempertahankan. Menjaga media query dikelola adalah penting. Mixin ini tidak penawar yang sempurna, tapi itu jelas mendorong pendekatan yang kering untuk berurusan dengan media queries dgn waras — terutama ketika dipasangkan dengan fungsi baru-breakpoint. Bagaimana, saya mendengar Anda bertanya?

Anda dapat menulis blok permintaan media yang dapat mengambil grid konteks. Katakanlah Anda memiliki dua unsur yang menambahkan kolom sampai 12 — sebagaimana didefinisikan dalam $total-kolom dalam file _grid-pengaturan Anda. Elemen-elemen ini span 3 dan 9 kolom masing-masing pada layar ukuran desktop, yang memungkinkan untuk 1088px lebar luar wadah. Untuk perangkat kecil atau ukuran viewport, memungkinkan media [query] mixin tahu apa ukuran konteks 12 kolom kebutuhan untuk mengubah ke nomor lain dan menyesuaikan ukuran untuk elemen-elemen responsif dalam konteks baru yang sesuai. Boom!

Haml:

1	.container
2	%aside 3 col / 1 col
3	%article 9 col / 2 col

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: #f5f5f5

aside, article
  padding: 10px
  margin-bottom: 20px
  height: 100px

aside
  +span-columns(3)
  background-color: #81d4fa 
  +media(max-width 700px, 4)
    +span-columns(1)

article
  +span-columns(9)
  background-color: #e64a19
  +media(max-width 700px, 4)
    +span-columns(2)

Di sini, saya memberikan media mixin dengan fitur media melalui 700px lebar dan konteks grid baru 4 kolom untuk $total-kolom max-lebar dari elemen. Setelah menetapkan konteks grid yang baru untuk elemen samping dan artikel untuk ukuran viewport 700px max, saya hanya perlu memberitahu elemen berapa banyak kolom mereka span sekarang dapat dalam jumlah baru 4 kolom. Secara pribadi, saya pikir ini cukup darn mudah dibaca dan mudah untuk mengatur. Ia mendapat lebih dingin setelah Anda kembali konteks media (media query / konteks grid) melalui fungsi baru-breakpoint dan menyimpannya ke variabel Sass.

Catatan: Jika Anda memberikan mixin ini dengan hanya nilai piksel, tanpa fitur media khusus:

Sass:

1	.some-responsive-element
2	+span-columns(8)
3	+media(700px)
4	+span-columns(4)

maka rapi akan menggunakan $default-fitur yang min lebar. Juga, menyediakan konteks grid opsional dan default untuk apa pun diatur melalui $total-kolom di parsial _grid-pengaturan Anda.

Baru-breakpoint

Anda mungkin bertanya-tanya apakah yang dimaksud dengan pendekatan kering yang saya sebutkan beberapa paragraf sebelumnya, kan? Itulah roh!

Fungsi ini berguna Sass kustom adalah Robin untuk media Batman, menjaga Anda dari mengulangi diri Anda lagi dan lagi. Jika Anda ingin membuat pertanyaan media Anda jauh lebih mudah dibaca dan reuseable, saya tidak melihat alasan mengapa Anda tidak akan menggunakan sidekick ini untuk memerangi kejahatan query media.

Cukup analogi Batman. Sederhananya, Semua fungsi ini tidak adalah menyelamatkan konteks media (media query / konteks grid) melalui variabel dan memberi Anda kesempatan untuk menggunakan kembali mereka di semua mixins media Anda. Itulah salah satu heck of ekstraksi berguna! Mari kita lihat.

Sass:

$tablet: new-breakpoint(min-width 768px max-width 1024px 4)

.some-responsive-element
  +span-columns(3)
  +media($tablet)
    +span-columns(1)

.some-other-responsive-element
  +span-columns(9)
  +media($tablet)
    +span-columns(2)

Super mudah dibaca! Untuk menjadi tambahan yakin kita pada halaman yang sama: di sini Anda akan memberikan semua fitur media Anda perlu (tapi tidak koma, usus, atau, dan) ditambah jumlah kolom untuk konteks grid baru, kemudian menyimpannya ke variabel Sass. Semua yang tersisa untuk dilakukan adalah pakan mixins media Anda dengan variabel yang sesuai, dan DRY mereka.

Saya harap Anda akan menghargai bagaimana bersih membaca ini dan betapa mudahnya untuk men-tweak Anda layout untuk berbagai breakpoints, Semua dalam satu tempat sentral. Lewatlah sudah hari-hari dimana mengelola ton layout terkait pertanyaan media cepat bisa Anda dalam pertarungan tinju fantasi dengan mantan Anda sendiri.

baris

Saya ingin mengambil sedikit waktu ekstra untuk menjelajahi satu ini. Jika Anda tidak menggunakan tabel sangat sering dalam desain Anda (seperti yang Anda mungkin tidak boleh karena kami mencium hari-hari menggunakan tabel untuk tata letak tujuan selamat tinggal) satu ini bisa rumit untuk melompat ke segera.

Dasar-dasar

Anda memiliki dua pilihan utama untuk menggunakan mixin ini: dengan tabel argumen atau tanpa argumen.

Sass:

1	.some-row-element
2	+row

Bila menggunakan baris tanpa argumen Meja, clearfix ditambahkan dan $display tetap set ke default, yang blok. Secara efektif, yang berarti bahwa apa pun yang datang setelah elemen Ruangan Khusus yang menggunakan baris membutuhkan untuk memulai sendiri hal terpisah "hukuman".

Sass:

1	.some-table-row-element
2	+row(table)

Di sisi lain, menggunakan row(table), Anda dapat menebaknya, membuat ini bagian baris dari tabel tata letak. Apa yang terjadi di bawah tenda, antara lain, adalah bahwa ini mixin menetapkan tampilan: tabel dan tabel-layout: tetap.

Ada satu lagi pilihan yang dapat Anda berikan ini mixin dengan. Anda dapat melewati sebuah argumen ($direction dengan LTR atau RTL) yang mengubah arah Anda layout untuk baris tertentu.

Sass:

1	.some-row-element
2	+row($direction: RTL)

Tapi mari kita mulai dari awal. Contoh dummy berikut memiliki 16 <img> unsur-unsur, empat pertama yang bersarang di bawah bagian .row wadah yang menggunakan baris mixin. Mari kita lihat apa yang terjadi jika Anda meninggalkan dari argumen meja.

Haml:

.container

  .row
    %img
    %img
    %img
    %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img

Sass:

.container
  +outer-container
  background-color: #f5f5f5

.row
  +row

img
  +span-columns(1)
  height: 60px
  margin-bottom: 5px
  background-color: #e64a19

Seperti yang Anda lihat, browser memperlakukan empat pertama <img> unsur-unsur sebagai bagian dari satu baris, menempatkan berikut <img> elemen pada baris terpisah. Unsur-unsur di bawah bagian .row wadah tidak terikat ke baris tertentu dan hanya mengambang ke bawah selama mereka memiliki ruang yang tersedia untuk mereka.

Dua bagian .row wadah mengakibatkan trik yang sama, ditumpuk di atas satu sama lain.

Haml:

.container

  .row
    %img
    %img
    %img
    %img
  
  .row
    %img
    %img
    %img
    %img
  
  %img
  %img
  %img
  %img
  
  %img
  %img
  %img
  %img

Tidak terlalu rumit kurasa. Walaupun aku tidak yakin bagaimana berguna ini akan, karena secara naluriah aku lebih suka menggunakan omega mixin untuk acara tersebut. Apa yang tampaknya cukup berguna, namun, menggunakan row(table) di sini. Anda hanya akan mendapatkan satu kolom sangat panjang yang tumpukan Semua 16 unsur di atas satu sama lain. Aku akan cadangan Anda gambar buruk tetapi memeriksa contoh codepen jika Anda penasaran.

Menggunakan baris tanpa argumen di atas meja

Sejauh ini saya telah menunjukkan kepada Anda mekanisme dasar mixin ini, terutama jika Anda baru mengenal game. Sekarang kita mendekati wilayah yang berguna. Mari bermain dengan tabel yang sebenarnya.

Jika Anda belum tertipu dengan tabel sebelumnya, saya sarankan menembakkan Google sebelum melanjutkan. Berikut adalah panduan bertahan hidup sedikit bagi mereka yang membutuhkan untuk me-refresh beberapa istilah.

Di sini kita memiliki sebuah tabel elemen. Ini terdiri dari sebuah tag thead, yang memiliki satu baris untuk menampilkan judul kolom berbagai melalui Tag th. Di bawah Anda akan menemukan tbody yang memiliki data aktual untuk masing-masing baris tabel (tr) melalui Tag td.

Haml:

.container

  %table
  
    %thead
      %tr
        %th Username
        %th User_ID
        %th Favorite Pizza
        %th Pet
        %th Pet Name
        %th Favorite Game
    
    %tbody
      %tr
        %td Joe
        %td 112233
        %td Pepperoni
        %td Cat
        %td Gordon
        %td Splinter Cell
      %tr
        %td Jane
        %td 223311
        %td Mushrooms
        %td Dog
        %td Fluffy
        %td Metal Gear Solid V
      %tr
        %td Bob
        %td 331122
        %td Onions
        %td Fish
        %td Sharky
        %td Little Big Planet 2

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: darken(#f5f5f5, 50%)

tr
  +row()
  text-align: center
  
th
  padding:
    top: 10px
    bottom: 20px
  
td
  height: 50px
  background: #81d4fa
  padding-top: 2px

Hal ini menyebabkan gumpalan tabel tidak merata, jahat, yang hanya mencakup sejauh konten dalam sel-sel data tabel. Jelas tidak super bermanfaat dan sakit jika Anda ingin secara manual memperbaiki hal ini menggunakan sekumpulan aturan CSS untuk membereskan hal atas.

Menggunakan row(table)

Harus ada solusi sederhana untuk hak ini? Menambahkan tabel sebagai argumen dan tampilan: tabel dan tabel-layout: tetap datang untuk menyelamatkan! Belum lagi sedikit topping mengisi-orang tua di bawah tenda.

Sass:

1	tr
2	+row(table)
3	text-align: center

Catatan: Tata letak meja tetap seperti ini memiliki keuntungan tidak hanya meletakkan tabel lebih cepat, tetapi lebar kolom tidak bergantung pada isi sel tabel. Anda akan mendapatkan secara merata meletakkan baris yang span lebar tabel wadah. Menghapus satu sel tabel data (td) dan Anda akan melihat unsur-unsur lain yang membagi ruang di baris merata:

Tanpa baris

Mari kita dekat dengan contoh yang menunjukkan perilaku default tabel tanpa menggunakan baris mixin sama sekali.

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  background-color: darken(#f5f5f5, 50%)

tr
  text-align: center
  
th
  padding:
    top: 10px
    bottom: 20px
  
td
  height: 50px
  background: #81d4fa
  padding-top: 2px

Seperti yang Anda lihat, sel-sel tersebar merata tapi tidak menggunakan semua memakan ruang yang tersedia bagi mereka. Mereka menyesuaikan diri dengan konten yang terpanjang per kolom dan menyesuaikan sel-sel mereka untuk menyelaraskan diri sepanjang jalur tersebut.

Permintaan maaf karena terlalu verbose tentang baris tapi saya harap bagian ini membuat sakit kepala Anda mungkin memiliki tabel dengan baris sedikit kurang menyakitkan.

mengisi-induk

Bergerak di, rapi menawarkan solusi yang mudah jika Anda ingin sebuah elemen dengan cepat mengisi induknya oleh mencakup jumlah kolom yang sama. Anda tidak perlu memberikan argumen. Mixin ini tidak mewah, tetapi mungkin akan berguna ketika Anda berurusan dengan pertanyaan media atau tabel.

Catatan: Menggunakan span-columns(12) bukan mengisi-orangtua untuk rentang seluruh lebar wadah luar tidak akan pendekatan yang tepat-itu hanya akan menambah tidak perlu Bagasi.

Haml:

1	.container
2	%aside Aside 3 columns \| fill-parent
3	%article Article 5 columns \| fill-parent

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

aside
  +span-columns(3)
  +fill-parent
  background-color: #81d4fa 

article
  +span-columns(5)
  +fill-parent
  background-color: #e64a19

Diingat bahwa unsur-unsur menggunakan mengisi-orang tua mengabaikan unsur-unsur lain dalam baris yang sama, dan bertujuan untuk rentang lebar penuh orang tua mereka tanpa mempertimbangkan tetangga mereka. Saya kira ini sederhana, mari kita lanjutkan!

Arah-konteks

Setiap elemen di grid rapi Anda memiliki $default-tata letak-arah yang ditetapkan untuk LTR (kiri-ke-kanan) di settings/_grid.scss. Ini berarti bahwa di balik layar rapi selalu menggunakan arah-konteks dengan kiri-ke-kanan.

Di bawah kap mesin, mixin ini tidak melakukan apa-apa selain mengubah arah apung dari elemen yang diterapkan. Apa yang rapi adalah bahwa dalam beberapa konteks terarah, katakanlah dari kiri ke kanan, Anda dapat mengumpulkan banyak elemen grid dan mengubah arahnya ke kanan-ke-kiri sekaligus, di bawah satu blok kode. Sekali lagi, solusi ini membuat semuanya menjadi lebih kompak dan mudah dibaca untuk diri sendiri, serta mudah dimengerti untuk seseorang yang tidak yang akrab dengan proyek tertentu.

Haml:

1	.container
2	%aside 3 columns
3	%article 9 columns

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

+direction-context(right-to-left)
  aside
    +span-columns(3)
    background-color: #81d4fa

  article
    +span-columns(9)
    background-color: #e64a19

Berikut adalah demo yang sama tanpa arah-konteks:

Berikut adalah contoh lain. Tidak ada baru untuk sekarang, hanya saja bahwa kolom adalah ukuran yang sama dan juga mengalir dari kanan ke kiri.

Haml:

1	.container
2	%aside 3 columns
3	%article 3 columns

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

+direction-context(right-to-left)
  aside
    +span-columns(3)
    background-color: #81d4fa

  article
    +span-columns(3)
    background-color: #e64a19

Berikut sedikit tweak memiliki hanya satu elemen tiga kolom ini menggunakan mixin, dan karena itu mereka mengapung ke sisi berlawanan dari wadah. Tidak ada yang terlalu magis, tapi ini mungkin berguna untuk ada dalam tas Anda trik.

Sass:

body
  color: white
  background-color: white

.container
  +outer-container
  margin-top: 10px
  background-color: #f5f5f5

aside, article
  margin-bottom: 5px
  height: 200px  

  
aside
  +span-columns(3)
  background-color: #81d4fa
  
+direction-context(right-to-left)
  article
    +span-columns(3)
    background-color: #e64a19

Last Mile

Bagian terakhir ini tutorial mencakup beberapa mixins saya ingin menyebutkan demi kelengkapan, tapi yang saya pribadi berusaha menghindari karena mereka tidak selalu memberikan hasil yang saya harapkan. Jika Anda memiliki pengalaman yang lebih baik menggunakan mereka, tolong beritahu saya. Selain itu, tiga dari mereka akan segera menjadi usang:

Reset-tampilan
Reset-tata letak-arah
reset-all

Reset-tata letak-arah

Tidak banyak yang bisa dikatakan tentang yang satu ini. Bayangkan Anda telah mengubah arah tata letak karena alasan apa pun dan ingin beralih kembali ke $ default-layout-direction (kiri ke kanan)? Di sini Anda pergi, konteks default dipulihkan! Tidak perlu ada argumen.

Sass:

.row
  +row($direction: RTL)

.row 
  reset-layout-direction

Kapan ini mungkin berguna? Pertanyaan yang bagus! Dokumentasi mengatakan sebagian besar ketika Anda perlu untuk mengubah arah dalam sebuah baris. Aku secara pribadi tidak akan peduli terlalu banyak. Pertama-tama itu telah dijadwalkan untuk menjadi deprecated mendukung arah yang mixin, dan juga ini memberi saya sakit kepala mengejutkan ketika saya ingin membuatnya bekerja dengan media queries.

Tampilan-konteks

Untuk menciptakan sebuah blok kode yang perubahan sifat tampilan yang digunakan oleh mixins dalam dirinya sendiri, Anda memiliki dua pilihan, Anda dapat melewati ke mixin ini: blok dan meja. Yang pertama jelas dan meja menambah tampilan: sel tabel untuk Anda. sel tabel kekuatan elemen untuk berperilaku seperti elemen td.

Sass:

1	+display-context(table)
2	.some-cell
3	+span-columns(2)

Reset-tampilan

Mari mengatakan Anda telah mengubah tampilan aktif untuk tabel seperti dalam contoh di atas, reset-tampilan membantu Anda dengan mudah beralih kembali ke blok. Dibutuhkan ada argumen baik. Dokumentasi mengatakan paling berguna jika diterapkan ke satu baris yang telah mengubah nilai-nilai layar mereka.

Sass:

.row
  +row(table)
  
.row 
  +reset-display

Reset-semua

Jika Anda ingin menggabungkan tampilan ulang dan ulang-tata letak-arah dalam satu pergi, itulah apa yang akan Anda dapatkan dengan reset-semua — tidak ada argumen yang diperlukan. Katakanlah pada beberapa baris Anda mengubah tampilan tabel dan $default-tata letak-arah untuk RTL dan ingin beralih kembali.

Sass:

.row
  +row(table, RTL)
  
.row 
  +reset-all

Akhir pikiran

Yah, itu satu panjang. Terima kasih untuk membuatnya melalui, dan saya harap Anda menemukan untuk menjadi sebuah perjalanan yang menarik ke wilayah mixin rapi. Ada satu hal lagi untuk dibahas; yaitu semua variabel yang Anda miliki untuk menyesuaikan kerangka kerja untuk kebutuhan Anda. Tutorial berikutnya adalah yang lebih pendek, tetapi membungkus liputan kami tentang Rapi. Sampai jumpa!