Salah satu keunggulan dari menggunakan CSS pre-processor seperti Sass adalah tersedianya fitur operator standar matematika yang dapat digunakan untuk mengalkulasi dua atau lebih nilai (numerik) suatu properti.
Dengan native CSS pun dapat melakukan hal yang sama, yaitu menggunakan fungsi calc(). Hanya saja fungsi calc() ini sebelumnya masih jarang digunakan, alasannya karena isu dukungan di mayoritas browser. Namun sekarang sudah waktunya untuk mulai mempelajari dan menggunakan fungsi calc().
What’s calc()?
calc()adalah fungsi matematika CSS (native) untuk mengalkulasi dua atau lebih nilai (numerik) suatu properti.
property: calc(expression)
Di dalam fungsi calc(), expression dapat terdiri dari satu atau lebih operasi dengan operator standar matematika seperti penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/).
Aturan prioritas matematika juga berlaku di dalam fungsi calc() ini. Selain itu, yang perlu diperhatikan adalah pemberian spasi di sekitar operator penjumlahan (+) dan pengurangan (-), maksudnya adalah agar tidak diartikan sebagai notasi positif atau negatif.
Berikut merupakan potongan kode untuk mendefinisikan nilai properti width dengan menggunakan fungsi calc().
width: calc(900px - 600px);
Namun, potongan kode di atas tidaklah menunjukkan kekuatan dari fungsi calc() yang sesungguhnya. Lagipula untuk apa mengalkulasikan selisih dari nilai 900px dan 600px, sedangkan sebenarnya dapat langsung didefinisikan dengan nilai 300px?
So, why calc()?
width: calc(100% - 600px);
Inilah kekuatan utama fungsi calc(), yaitu mampu untuk mengalkulasi nilai dengan satuan pengukuran yang berbeda. Contohnya seperti mengalkulasikan nilai dengan satuan persen (%) dan piksel (px).
.parent {
width: 900px;
}
.child {
width: calc(100% - 600px); /* 900px - 600px = 300px */
}
Dari potongan kode di atas, maka nilai width pada element .child akan selalu minus 600px dari 100% nilai width pada element .parent.
Selain itu, fungsi calc() ini juga dapat dibuat bersarang. Maksudnya adalah di dalam fungsi calc() terdapat fungsi calc() lagi.
width: calc(100% - calc(100%/3));
Dan yang menarik adalah jika nilai dari suatu properti yang didefinisikan dengan menggunakan fungsi calc() dilihat melalui inspect element di browser, maka yang nampak bukan nilai yang merupakan hasil kalkulasi dari expression di dalam fungsi calc() tersebut, melainkan calc(expression) itu sendiri. Sehingga dapat dikatakan bahwa ukuran properti tersebut akan beradaptasi sesuai dengan perubahan ukuran viewport.