Penggunaan SCSS pada Bulma

setting dan instalasi menggunakan NPM

Hai, melanjukan dari artikel saya sebelumnya yaitu Mengenal Bulma, kali ini saya akan mencoba menuliskan artikel cara install Bulma mengunkan NPM dan penggunaan file SASS pada Bulma.

Untuk itu kita harus install NPM terlebih dahulu, silahkan buka link berikut untuk install NPM https://www.npmjs.com/get-npm.

Setalah kita install NPM, pada Node.js Command Promt masuklah ke dalam folder project anda lalu ketik ‘npm install bulma’ lalu tekan enter.

Lalu setelah npm ter-install kita bisa meng-install Bulma dengan ketikan perintah ‘npm install bulma’.

Maka Bulma akan ter-install di dalam folder ‘node_modules/bulma/’, kita bisa lihat struktur folder dan file yang ada pada Bulma sebagai berikut

bulma/
-- CSS/
   style.css
-- SASS/
   -- base/
      _all.sass
      generic.sass
      helpers.sass
      minireset.sass
   -- components/
      _all.sass
      card.sass
      level.sass
      media.sass
      menu.sass
      message.sass
      modal.sass
      nav.sass
      pagination.sass
      panel.sass
      tabs.sass
   -- elements/
      _all.sass
      box.sass
      button.sass
      content.sass
      form.sass
      icon.sass
      image.sass
      notification.sass
      other.sass
      progress.sass
      table.sass
      tag.sass
      title.sass
   -- grid/
      _all.sass
      columns.sass
      tiles.sass
   -- layout/
      _all.sass
      footer.sass
      hero.sass
      section.sass
   -- utilities/
      _all.sass
      animations.sass
      controls.sass
      derived-variables.sass
      functions.sass
      initial-variables.sass
      mixins.sass
      variables.sass
bulma.sass

pastikan SASS juga telah ter-install, untuk install SASS dengan menggunakan npm silakan baca artikel berikut mengenal SASS

SASS memiliki dua Syntax yaitu SASS Syntax dan SCSS Syntax. Perbedaannya adalah SCSS Syntax penulisan kode nya menggunkan bracket dan semicolom pada property seperti berikut:

.className {
   property: value;
}

sedangkan SASS Syntax tidak menggunakan bracket dan semicolom seperti berikut:

.className
   property: value

Nah pada Bulma yang digunakan adalah SASS Syntax. Silahkan lihat contoh Syntax nya di sini http://sass-lang.com/guide.

Maka indent space sangat berpengaruh sekali pada penulisan kode terutama saat membuat Nesting pada kode.

Kemudian deklarasikan file SASS yang ada pada folder bulma/ pada file .sass kita yang nanti akan di-compile menjadi file CSS seperti berikut:

@import ‘node_modules/bulma/bulma’

Jika kita mendeklarasikan file bulma.sass seperti diatas berarti kita dapat menggunakan semua style elements dan components yang ada pada Bulma

Catatan: file yang dideklarasikan hanya nama file nya saja misal bulma.sass > bulma

Lalu bagaimana jika kita hanya ingin menggunkan style elemets dan components tertentu saja?

Maka kita bisa mendeklarasikan file SASS yang ada pada folder base/, components/, elements/, grid/, layout/ dan utilities/ seperti berikut:

@import ‘node_modules/bulma/sass/base/_all’
@import ‘node_modules/bulma/sass/utilities/_all’
@import ‘node_modules/bulma/sass/layout/footer’
@import ‘node_modules/bulma/sass/grid/columns’
@import ‘node_modules/bulma/sass/components/nav’
@import ‘node_modules/bulma/sass/elements/notification’

Seperti contoh di atas kita bisa mendeklarasikan style SASS pada Bulma sesuai kebutuhan misal kita hanya membutuhkan style untuk grid system nya saja, maka kita hanya perlu medeklarasikan file yang ada pada folder grid/ yaitu columns.sass

Untuk style SASS yang ada pada folder base/ dan utilities/ adalah style yang kita memang membutuhkannya, karena pada folder base/ berisi style general untuk CSS dan yang ada pada folder utilities/ berisi variable dan fungsi-fungsi yang tentunya berkaitan dengan style yang lain.

Kemudian tentunya kita membutuhkan custom style dari style yang ada pada Bulma misal kita ingin mengganti warna button, text dan lain sebagainya sesuai keinginan kita.

Pada SASS tentunya code warna di simpan di dalam sebuah variable dan seperti yang sudah saya sebutkan sebelumnya, variable-variable berada pada folder utilities/

Setelah kita mengetahui file SASS yang menyimpan variable yang ingin kita custom, lakukan hal seperti berikut:

1. Buatlah terlebih dahulu sebuah file misal variable.sass
2. kemudian pada file tersebut lakukan hal berikut

@import “../../node_modules/bulma/sass/utilities/initial-variables”

$primary: #dedede

dari contoh kode di atas, kita mengubah value warna pada variable $primary yang ada pada file initial-variables.sass

lalu deklarasikan file variable.sass pada file SASS yang akan di compile menjadi CSS

Oke demikian cara Install Bulma Menggunakan NPM dan penggunaan file SASS pada Bulma.