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

Contoh Mixin pada SASS silahkan liat disini http://sass-lang.com/guide

Berikut beberapa Mixin yang berguna pada CSS Framework Bulma:

1. =arrow($color)
2. =center($width, $height: 0)
3. =overlay($offset: 0)
4. =placeholder
5. =from($device)dan =until($device)

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

1. =arrow($color)

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

=arrow($color)
 border: 1px solid $color
 border-right: 0
 border-top: 0
 content: “ “
 display: block
 height: 0.5em
 pointer-events: none
 position: absolute
 transform: rotate(-45deg)
 width: 0.5em

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:

.arrow-down
  &:before
    +arrow(#bebebe)

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

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

=center($width, $height: 0)
 position: absolute
 @if $height != 0
 left: calc(50% — (#{$width} / 2))
 top: calc(50% — (#{$height} / 2))
 @else
 left: calc(50% — (#{$width} / 2))
 top: calc(50% — (#{$width} / 2))

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:

.centermiddle
 +center(30px, 40px)
.centermiddle
 +center(30px)

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:

=overlay($offset: 0)
 bottom: $offset
 left: $offset
 position: absolute
 right: $offset
 top: $offset

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:

.overlayClass
 backgound-color: rgba(0,0,0,0.7)
 +overlay(30px)

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:

=placeholder
 $placeholders: ‘:-moz’ ‘:-webkit-input’ ‘-moz’ ‘-ms-input’
 @each $placeholder in $placeholders
 &:#{$placeholder}-placeholder
 @content

untuk penggunaanya sebagai berikut:

+placeholder
 font-size: 12px
 color: #dddddd

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:

+from(768px)
 h1
  font-size: 48px
+until(767px)
 h1
  font-size: 30px

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.