CSS @function Native Akhirnya CSS Punya Logika Sendiri

Selama bertahun-tahun, kalau kamu mau bikin fungsi reusable di CSS, jawabannya selalu sama: pakai Sass, Less, atau PostCSS.

Tidak ada jalan lain. CSS murni tidak punya kemampuan mendefinisikan logika sendiri yang bisa dipanggil ulang.

Tapi itu dulu.

Sekarang, spesifikasi CSS sedang memproses fitur baru bernama @function — sebuah rule yang memungkinkan kamu mendefinisikan fungsi CSS kustom langsung di stylesheet, tanpa preprocessor apapun.

Ini bukan sekadar sintaks sugar. Ini perubahan fundamental cara CSS bekerja sebagai bahasa.

Selama Ini Kita Butuh Sass Hanya untuk Bikin Fungsi CSS

Coba ingat kapan terakhir kali kamu menulis fungsi di CSS murni.

Jawabannya: tidak pernah bisa.

Yang bisa kamu lakukan selama ini hanyalah menggunakan built-in functions seperti calc(), clamp(), rgb(), atau min(). Fungsi-fungsi itu sudah ada dari sananya, kamu tidak bisa mendefinisikan yang baru.

Kalau kamu butuh fungsi kustom — misalnya konversi nilai, kalkulasi spacing dinamis, atau logika warna berulang — kamu terpaksa lari ke Sass:

// Sass function — tidak bisa dilakukan di CSS murni
@function spacing($multiplier) {
  @return $multiplier * 8px;
}

.card {
  padding: spacing(3); // output: 24px
}

Kode itu bersih, reusable, dan mudah dipelihara.

Tapi harganya adalah: kamu harus setup build tool, kompilasi Sass ke CSS, dan menambah kompleksitas pipeline.

Untuk project kecil, ini sering terasa overkill hanya demi satu fitur.

Apa Itu @function di CSS Native dan Sintaksnya

@function adalah CSS rule baru yang sedang distandarkan melalui spesifikasi CSS Functions and Mixins Module Level 1.

Dengan fitur ini, kamu bisa mendefinisikan fungsi kustom langsung di CSS, lengkap dengan parameter dan nilai kembalian.

Sintaks dasarnya seperti ini:

@function --spacing(--multiplier) {
  result: calc(var(--multiplier) * 8px);
}

.card {
  padding: --spacing(3);
}

Ada beberapa hal penting yang perlu diperhatikan dari sintaks ini.

Pertama, nama fungsi kustom harus diawali dengan dua tanda hubung (--), sama seperti CSS custom properties.

Kedua, parameter dideklarasikan di dalam tanda kurung, juga dengan format --nama.

Ketiga, nilai kembalian ditulis dengan keyword result: di dalam body fungsi.

Keempat, fungsi ini bisa menerima multiple parameter:

@function --clamp-fluid(--min, --max, --viewport) {
  result: clamp(
    var(--min),
    calc(var(--viewport) * 1vw),
    var(--max)
  );
}

h1 {
  font-size: --clamp-fluid(1.5rem, 4rem, 5);
}

Kode di atas jauh lebih readable dibandingkan menulis clamp() panjang secara manual setiap kali.

Perbandingan @function CSS vs Sass Function vs Custom Properties

Banyak developer bertanya: "Bukankah CSS custom properties sudah cukup?"

Jawabannya: tergantung kasusnya.

Custom properties dan @function adalah dua hal yang berbeda. Keduanya punya peran masing-masing.

Custom Properties — Untuk Nilai yang Berubah

Custom properties (CSS variables) adalah tempat menyimpan nilai.

:root {
  --base-spacing: 8px;
}

.card {
  padding: calc(var(--base-spacing) * 3); /* 24px */
}

Masalahnya, kamu harus menulis calc(var(--base-spacing) * 3) setiap kali, di setiap selector. Tidak ada enkapsulasi logika.

Sass Function — Untuk Logika di Build Time

Sass function bekerja saat kompilasi, bukan di browser.

@function rem($px) {
  @return #{$px / 16}rem;
}

h1 { font-size: rem(32); } // output: 2rem

Hasilnya sudah "dimasak" sebelum CSS sampai ke browser. Tidak ada fleksibilitas runtime.

@function CSS Native — Untuk Logika di Runtime

@function CSS bekerja langsung di browser, secara dinamis.

@function --to-rem(--px) {
  result: calc(var(--px) / 16 * 1rem);
}

h1 {
  font-size: --to-rem(32); /* dihitung langsung oleh browser */
}

Artinya nilai bisa berubah sesuai kondisi — misalnya nilai yang bergantung pada media query, container query, atau interaksi user.

Ini yang tidak bisa dilakukan Sass, karena Sass sudah selesai bekerja jauh sebelum browser berjalan.

Contoh Penggunaan @function untuk Kalkulasi Layout dan Warna

Teori sudah. Sekarang lihat bagaimana @function benar-benar berguna di kasus nyata.

Kasus 1: Fluid Typography System

Fluid typography biasanya membutuhkan rumus clamp() yang panjang dan repetitif.

Dengan @function, kamu bisa membungkusnya sekali:

@function --fluid-type(--min-size, --max-size) {
  result: clamp(
    calc(var(--min-size) * 1rem),
    calc(0.5rem + 2.5vw),
    calc(var(--max-size) * 1rem)
  );
}

h1 { font-size: --fluid-type(1.75, 3.5); }
h2 { font-size: --fluid-type(1.5, 2.5); }
h3 { font-size: --fluid-type(1.25, 2); }
p  { font-size: --fluid-type(1, 1.125); }

Rapi, konsisten, dan mudah diubah dari satu tempat.

Kasus 2: Spacing Scale Berbasis Baseline

Daripada hardcode angka spacing di mana-mana:

@function --space(--step) {
  result: calc(var(--step) * 0.5rem);
}

.section   { padding: --space(8);  }  /* 4rem   */
.card      { padding: --space(4);  }  /* 2rem   */
.badge     { padding: --space(1) --space(2); } /* 0.5rem 1rem */

Sekarang seluruh spacing system kamu konsisten dan terikat pada satu skala.

Kasus 3: Kalkulasi Warna Dinamis

Ini salah satu use case paling menarik — mengkombinasikan @function dengan color-mix() untuk membangun sistem warna yang fleksibel:

@function --tint(--color, --amount) {
  result: color-mix(in srgb, var(--color) calc(100% - var(--amount)), white);
}

@function --shade(--color, --amount) {
  result: color-mix(in srgb, var(--color) calc(100% - var(--amount)), black);
}

.btn-primary {
  background: --tint(#3b82f6, 20%);
  border-color: --shade(#3b82f6, 15%);
}

Tidak perlu Sass lighten() dan darken() lagi. Semua berjalan native di browser.

Kasus 4: Logika Grid yang Reusable

@function --auto-grid(--min-col-width) {
  result: repeat(
    auto-fill,
    minmax(min(var(--min-col-width), 100%), 1fr)
  );
}

.product-grid {
  display: grid;
  grid-template-columns: --auto-grid(280px);
}

.sidebar-grid {
  display: grid;
  grid-template-columns: --auto-grid(200px);
}

Pattern responsive grid yang biasa dipakai berulang kini bisa dienkapsulasi dengan bersih.

Browser Support Saat Ini dan Strategi Fallback yang Realistis

Ini bagian yang perlu kejujuran penuh.

Per Juli 2026, CSS @function belum tersedia di browser production secara penuh.

Fitur ini masih dalam tahap spesifikasi aktif di W3C CSS Working Group, dan tersedia di beberapa browser sebagai experimental/flag feature. Chrome Canary dan beberapa build experimental Firefox sudah mulai mengimplementasikan draft awal.

Ini bukan berarti kamu harus menunggu dulu. Ada beberapa pendekatan yang masuk akal.

Strategi 1: Progressive Enhancement dengan @supports

/* Fallback untuk browser lama */
h1 {
  font-size: clamp(1.75rem, 0.5rem + 2.5vw, 3.5rem);
}

/* Enhancement untuk browser yang support @function */
@supports (function(--test())) {
  @function --fluid-type(--min, --max) {
    result: clamp(calc(var(--min) * 1rem), calc(0.5rem + 2.5vw), calc(var(--max) * 1rem));
  }

  h1 {
    font-size: --fluid-type(1.75, 3.5);
  }
}

Browser yang tidak mengerti @function akan tetap menggunakan fallback clamp() biasa.

Strategi 2: Tetap Gunakan Sass untuk Sekarang, Migrasi Bertahap

Ini pilihan paling pragmatis untuk project production.

Sass tidak akan kemana-mana dalam waktu dekat. Tapi kamu bisa mulai membiasakan pola pikir @function CSS dalam penulisan kode Sass kamu sekarang, sehingga migrasi nanti lebih mudah.

Tulis Sass function-mu seolah-olah kamu sedang menulis CSS @function — parameter eksplisit, return value jelas, tidak ada side effect.

Strategi 3: Pantau Spesifikasi dan Implementasi

Beberapa sumber yang perlu kamu bookmark:

• caniuse.com — pantau status browser support
• Chrome Platform Status — cek progress implementasi di V8/Blink
• W3C CSS Functions and Mixins Module — spesifikasi resmi

Perkembangan fitur ini sangat aktif. Kemungkinan besar CSS @function akan masuk baseline support dalam 12–18 bulan ke depan.

Apa Artinya Ini bagi Developer yang Bergantung pada Sass

Kalimat "Sass akan mati karena CSS native" adalah overstatement.

Sass masih punya banyak fitur yang belum bisa direplikasi CSS native — @mixin, @extend, operasi kondisional kompleks dengan @if, loop dengan @each dan @for, dan masih banyak lagi.

Tapi ada satu hal yang benar: dependensi pada Sass untuk alasan yang hanya @function — itu sekarang punya alternatif native.

Untuk project baru yang ringan, @function CSS bisa jadi alasan kuat untuk tidak setup Sass sama sekali.

Untuk project yang sudah ada, tidak perlu panik. Migrasi bisa dilakukan bertahap saat browser support sudah matang.

Yang perlu diubah adalah mindset: CSS bukan lagi sekadar bahasa deklaratif tanpa logika. CSS sedang tumbuh menjadi bahasa yang ekspresif dengan kemampuan komputasi nyata.

Kesulitan dengan tugas programming atau butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas IT dan teknik informatika Anda. Dapatkan bantuan profesional di jasa tugas IT KerjaKode.

Kesimpulan

CSS @function adalah lompatan besar dalam evolusi CSS sebagai bahasa.

Untuk pertama kalinya, developer bisa mendefinisikan logika reusable langsung di stylesheet tanpa preprocessor.

Perbedaannya dengan custom properties jelas: custom properties menyimpan nilai, @function mengenkapsulasi logika.

Perbedaannya dengan Sass juga jelas: Sass bekerja di build time, @function bekerja di runtime browser secara dinamis.

Browser support belum siap untuk production sekarang, tapi arahnya sudah jelas.

Sekarang adalah waktu yang tepat untuk mempelajari sintaks dan polanya — supaya kamu siap saat fitur ini benar-benar landing di semua browser utama.

CSS yang punya logika sendiri bukan lagi mimpi. Tinggal tunggu tanggal mainnya.