Advertisement
  1. Web Design
  2. Sass
Webdesign

Satu Jalan: Lebih Banyak Tasty Bourbon Mixins 

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins
Bourbon on the Rocks: Cool Functions to Improve Your Sass

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Artikel ini adalah bagian kedua dari eksplorasi ke dalam mixins dari Bourbon Sass Perpustakaan. Di antara mereka, Anda akan menemukan contoh berguna yang akan mempercepat alur kerja Anda dan meminimalkan kode Sass.

Daftar lain Goodies

Kita akan mendapatkan rasa mixins delapan berikut:

  • Blok inline mixin
  • Posisi mixin
  • Segitiga mixin
  • Clearfix mixin
  • Tombol mixin
  • Ukuran mixin
  • HiDPI media query mixin
  • Retina gambar mixin

Seperti dengan tutorial sebelumnya, contoh di bawah tidak selalu mewakili desain praktik terbaik, tetapi memilih untuk menjelajahi fungsionalitas dasar dari mixins ini.

Blok inline Mixin

Paragraf, secara default, menampilkan sebagai block elemen.

HTML:

file

Tingkat blok elemen, seperti paragraf, secara otomatis membuat baris baru dalam tata letak.

Mixin ini datang berguna jika Anda ingin mengubah perilaku tampilan default elemen untuk inline-block. Ini tidak hanya menetapkan display: inline-blok, tetapi juga mengurus quirks dan warisan dukungan untuk IE7.

Pelajari lebih lanjut tentang display pada designshack.net.

Sass: Blok ini memiliki perilaku seperti mengapung, melalui blok inline.

Lihatlah hasil CSS yang dihasilkan. Siapa yang ingin menangani hal-hal yang jahat seperti itu pula?

CSS output:

file

Ditetapkan untuk display: inline-block, paragraf mendapatkan sebaris ditampilkan, tapi mempertahankan karakteristik tingkat blok mereka.

Perhatian! Perhatikan spasi antara blok elemen. Jika Anda menggunakan float untuk mencapai tata letak yang sama, Anda tidak akan melihat apapun spasi. Ini adalah semacam default spasi, hadir dalam HTML, yang tidak pergi dengan mengatur margin 0px. Sebaliknya, Anda perlu untuk menghapus setiap karakter kesenjangan dalam markup itu sendiri, seperti yang ditunjukkan dalam pena ini:

Posisi Mixin

Mixin ini adalah singkatan untuk menulis sesuatu seperti berikut:

Sass:

Sass:

Thats it. Ada sihir, tapi masih super bermanfaat. Menjaga stylesheet sederhana dan mudah dibaca terbayar dari waktu ke waktu.

Segitiga Mixin

Ingin menggunakan CSS triangles tanpa bermain-main di sekitar? Pasti ada tidak perlu menggunakan gambar untuk pekerjaan. Sangat mudah sebagai pie dengan mixin ini.

Sass:

Parameter ketiga mendefinisikan arah. Pilihan ini meliputi mixin:

file
  • down
  • up
  • left
  • right

  • up-right
  • up-left
  • down-right
  • down-left

Anda bahkan dapat menentukan warna kedua jika Anda membutuhkan warna latar belakang untuk segitiga Anda.

Clearfix Mixin

Wadah yang telah melayang unsur-unsur dalam mereka mengalami zero-height container problem yang — pada dasarnya wadah elemen Mengempiskan piksel nol jika semua unsur-unsur di dalam melayang dan diambil dari flow container. Pada dasarnya, tidak ada yang tersisa untuk mengisi wadah.

Clearfix mixin mengurus ini bila diterapkan ke wadah pembungkus elemen. Hal terbaik tentang ini adalah bahwa hal itu tidak memerlukan addional "kosong" markup untuk mengakomodasi clearfix. Itu membuat hal-hal semantik, memisahkan kekhawatiran, dengan hanya menambahkan clearfix dalam stylesheet Anda. Lihatlah contoh ini sangat sederhana:

HTML:

Sass:

file

Dalam contoh di atas, abu-abu wadah memperluas terus logos floated di dalamnya. Namun, ketika clearfix tidak digunakan:

file

Jika Anda melihat kode sumber itu menjadi jelas bagaimana micro clearfix ini bekerja: 

Sass: source code Bourbon

Mixin ini menggunakan :after pseudo elemen untuk menempatkan string kosong di akhir wadah. Dalam melakukannya, itu meniru konten setelah logo dan trik browser ke memperluas wadah abu-abu untuk mengelilingi elemen lain dalam.

Tombol Mixin

Perlu berkualitas tinggi tombol keluar dari kotak?

Tombol standar

file

HTML:

Sass:

That's it! Tombol sederhana dan semantik bersih. Mereka bahkan datang dengan efek hover halus mencari besar. Dan ada dua pilihan yang lain:

Pil tombol

file

HTML:

Mengkilap tombol

file

HTML:

Sass:

Perhatian! Harap dicatat bahwa teks pada tombol secara otomatis mengubah warnanya tergantung pada ringannya warna dasar tombol.    Dengan cara itu mixin memberikan kontras dan keterbacaan yang lebih baik. Luar biasa!  Luar biasa! 

file

Sass: 

Size Mixin 

Apakah Anda perlu mendefinisikan width dan height dalam satu deklarasi?   Dengan Bourbon, inilah yang perlu Anda lakukan:

Sass:

CSS output:

Anda dapat memberikan nilai-nilai piksel atau hanya nilai-nilai numerik. Anda dapat menggunakan auto untuk nilai-nilai ini juga. Jika Anda memberikan hanya satu ukuran, Bourbon mengasumsikan Anda inginkan persegi.

Sass:

HiDPI Mixin

Jika Anda ingin cepat menghasilkan media sepenuhnya diawali Penjual pertanyaan untuk mendeteksi perangkat HiDPI ("Retina"), mixin ini datang berguna.

Mulai dengan memberikan rasio piksel perangkat target dan Deklarasi yang berubah jika media query tendangan. Rasio standar adalah 1.3.

Sass HiDPI-media-query:

CSS output:

Cukup keren! Itu slims bawah berulang-ulang kode sedikit.

Retina gambar Mixin

Tergantung pada kerapatan piksel perangkat yang menampilkan desain Anda, Anda dapat memberikan gambar dengan resolusi sesuai bitmap. Mixin baik ini menyediakan gambar latar belakang retina atau gambar latar belakang non-retina — tergantung pada hasil mixin's HiDPI-media-kueri internal memeriksa perangkat untuk kerapatannya piksel.

Jika saya tidak salah, sebagai bonus, itu akan melayani hanya salah satu gambar untuk menghindari men-download kedua — terutama menguntungkan untuk jaringan selular. Jika semua hal di atas adalah gobbledy untuk Anda, saya sarankan mulai dengan artikel yang fantastis ini di Smashing Magazine.

Sass: 

Output CSS membantu menjelaskan fungsinya: 

Nilai default rasio piksel perangkat 1,3 menargetkan Apple "Retina" perangkat (yang memiliki rasio 2) serta perangkat dengan rasio piksel sebagai "rendah" sebagai 1,3. 

Mixin ini mengharapkan .png sebagai ekstensi standar untuk semua gambar. Secara default, ini juga mengharapkan ekstensi _2x.png ke nama file dari retina-gambar Anda.   Anda dapat menimpa kedua default dengan memberikan nama file retina lain dan ekstensi standar, seperti: 

Sass: 

CSS output: 

Tepuk tangan! 

Itu saja yang akan kita bahas dalam istilah mixbon Bourbon. Dalam tutorial berikutnya kita akan melihat fungsi Bourbon. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.