Mengenal Mixin Pada BULMA

SASS Mixin pada CSS Framework BULMA

Melanjutkan dari artikel saya sebelumnya mengenai CSS Framework BULMA, kali ini saya akan membahas Beberapa Mixin pada BULMA yang dapat kita gunakan saat development.

Untuk menggunakan Mixin pada Bulma tentunya kita harus menggunakan file SASS yang ada pada Bulma, silahkan baca Penggunaan SCSS pada Bulma

Berikut beberapa Mixin yang berguna pada CSS Framework Bulma:

Mixin diatas dapat kita lihat pada file mixin.sass > Bulma/sass/utilities/mixin.sass

Mixin ini digunakan untuk membuat arrow down yang bisanya sering digunakan pada dropdown menu, Berikut adalah kode nya:

Yang dapat kita custom pada Mixin ini hanya warna untuk arrow dan penggunaannya hanya untuk pseudo element :before atau :after pada style CSS.

Berikut contoh penggunaannya:

2. =center($width, $height: 0)

Mixin ini berfungsi untuk membuat posisi suatu element menjadi middle center, berikut adalah kode nya:

Pada Mixin ini memiliki kondisi, jika variable $height pada element tidak sama dengan 0 maka perhitungan dari posisi top akan di ambil dari value dari variable $height.

Dan jika variable $height kosong atau sama dengan 0 maka perhitungan dari posisi top akan di ambil dari value dari variable $width.

Berikut contoh penggunaannya:

3. =overlay($offset: 0)

Mixin ini digunakan untuk membuat sebuah overlay atau backdrop yang biasanya memiliki posisi absolute ynag menutupi semua content pada halaman web.Berikut adalah kode nya:

Pada Mixin ini kita dapat memberi margin atas, kiri, kanan dan bawah melalui variable $offset, dan jika kita tidak memberi nilai pada variable tersebut maka default value-nya adalah 0

berikut adalah contoh penggunaannya:

4. =placeholder

Mixin ini saya ikut sertakan disini karena saya sendiri sangat terbantu saat mengganti warna placeholder text pada form, dengan Mixin ini kita tidak direpotkan lagi dengan penulisan kode vendor prefixs. Berikut contoh kode dan penggunaannya:

untuk penggunaanya sebagai berikut:

5. =from($device) dan =until($device)

Ini adalah Mixin yang digunakan untuk membuat media queries, dengan Mixin ini kita bisa custom screen yg kita inginkan dengan memberi value pada variable $device. Berikut adalah contoh penggunaannya:

Mixin =from($device) untuk media queries untuk minimal width (min-width).

Maka kode CSS yg berada pada Mixin +from(768px) akan berjalan pada screen 768px ke atas.

Sedangkan kode CSS yg berada pada Mixin +until(767px) akan berjalan pada screen 767px ke bawah.

Mixin diatas adalah beberapa Mixin yang bisa kita gunakan saat proses development, karena memang sangat berguna dan kita bisa custom sesuai keinginan melalui variable nya.

Oke selamat mencoba dan semoga bermaanfaat.

Related posts:

ThunderSoft Video to GIF Converter is a handy tool for making animated GIF from video files. Preview original video frame by frame, easy crop and specify video clip, convert to gif with high quality…

Two impulsive things: one letter, one chat. The letter, an answer to a company which asked me after sending a CV. I was too honest. It was my only chance. Rejected. No big deal, but I would have…

A successful project manager always strives for a recurring set of workflows, tools and business relationships, but they also have to remain skilled enough to manage ad hoc requests. These quick…