Konversi SCSS ke CSS Online
Kompilasi SCSS/Sass ke CSS murni di browser Anda. Tanpa npm, tanpa Node.js, tanpa instalasi.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compiler SCSS ke CSS
Mengapa menggunakan compiler SCSS ini?
Konfigurasi nol
Tanpa npm install, tanpa webpack, tanpa Vite. Tempel SCSS Anda dan dapatkan CSS dalam hitungan detik.
Dart Sass resmi
Menggunakan compiler Dart Sass resmi yang dikompilasi ke WebAssembly. Kompatibilitas penuh dengan standar modern.
Privasi penuh
Semua berjalan di browser Anda. Kode Anda tidak pernah dikirim ke server mana pun.
Mixin, variabel, nesting
Dukungan penuh: $variabel, &:selektor, @mixin/@include, @extend, dan loop.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tulis atau tempel kode SCSS Anda
Tempel kode SCSS atau Sass ke editor. Variabel, nesting, mixin, fungsi, dan selektor induk (&) semuanya didukung.
Kompilasi instan
Output CSS murni muncul secara otomatis di panel kanan. Compiler berjalan secara lokal di browser Anda.
Salin atau unduh CSS
Salin CSS yang dihasilkan ke clipboard atau unduh sebagai file .css yang siap digunakan untuk produksi.
FAQ
Ada pertanyaan?
Sass memiliki dua sintaks. Sintaks asli dengan ekstensi .sass yang dibuat pada 2006 menggunakan indentasi sebagai pengganti kurung kurawal dan titik koma; lebih kompak tetapi tidak kompatibel dengan CSS standar. SCSS atau Sassy CSS dengan ekstensi .scss diperkenalkan dalam Sass 3.0 pada 2010 dengan sintaks yang sepenuhnya kompatibel dengan CSS: CSS apa pun yang valid juga valid SCSS. SCSS dengan cepat menjadi standar de facto dan digunakan oleh sebagian besar pengembang saat ini. Alat ini mendukung kedua sintaks.
Variabel SCSS didefinisikan dengan awalan $ dan dapat menyimpan warna, ukuran, font, atau nilai CSS apa pun. Misalnya $primary-color: #3498db; atau $base-font: Inter, sans-serif. Mereka digunakan langsung dalam properti seperti color: $primary-color. Berbeda dengan custom properties CSS yang berupa --variable, variabel SCSS diselesaikan pada waktu kompilasi dan tidak ada dalam output CSS. Untuk akses dinamis saat runtime dengan JavaScript, custom properties CSS adalah alat yang tepat.
Komunitas SCSS memiliki aturan tidak tertulis: tidak lebih dari 3-4 level nesting. Nesting yang dalam menghasilkan selektor CSS yang sangat spesifik sehingga sulit untuk ditimpa dan meningkatkan spesifisitas secara tidak perlu. Metodologi BEM berpadu baik dengan SCSS karena membatasi nesting ke 1-2 level sambil menjaga struktur yang jelas. Selektor induk & berguna untuk pseudo-class seperti &:hover dan &:focus serta modifier tanpa meningkatkan kedalaman secara semantis.
Ya. Mixin adalah salah satu pilar utama SCSS: didefinisikan dengan @mixin nama($params) dan dipanggil dengan @include nama(nilai). Mixin memungkinkan penggunaan ulang blok CSS dengan variasi. Alat ini juga mendukung @extend untuk pewarisan selektor, @function untuk fungsi kustom, @each, @for, dan @while untuk loop, serta @if dan @else untuk kondisional.
Ada kasus di mana menyiapkan lingkungan Node.js tidak praktis: menjelajahi SCSS dengan cepat tanpa membuat proyek, bekerja di mesin tanpa izin menginstal paket, memberikan demo langsung, meninjau output CSS dari potongan kode tertentu, atau sekadar mempelajari sintaks. Alat ini menggunakan compiler Dart Sass resmi yang merupakan implementasi referensi saat ini sejak LibSass tidak digunakan lagi pada Oktober 2020, dikompilasi ke WebAssembly untuk memastikan kompatibilitas penuh dengan standar SCSS modern.
LibSass adalah implementasi Sass dalam C/C++ yang digunakan oleh paket npm node-sass, yang selama bertahun-tahun menjadi cara paling populer untuk mengompilasi SCSS dalam proyek Node.js. Tim Sass tidak lagi mendukung LibSass pada Oktober 2020 karena tidak dapat mengikuti perkembangan spesifikasi baru. Dart Sass yaitu implementasi resmi yang ditulis dalam Dart dan diterbitkan sebagai JavaScript murni untuk npm sebagai paket sass, telah menjadi implementasi referensi sejak saat itu. Jika Anda memiliki proyek yang menggunakan node-sass, migrasi ke paket sass sangat direkomendasikan karena ini adalah pengganti langsung di sebagian besar kasus.
SCSS ke CSS online: kompilasi Sass tanpa npm atau Node.js di browser
Sass (Syntactically Awesome Style Sheets) adalah bahasa preprocessing CSS yang dibuat oleh Hampton Catlin dan dikembangkan terutama oleh Natalie Weizenbaum serta Chris Eppstein. Versi pertama dirilis pada November 2006 sebagai bagian dari framework Haml untuk Ruby. Sintaks aslinya menggunakan indentasi sebagai pengganti kurung kurawal, terinspirasi dari Python dan YAML, sehingga lebih kompak tetapi tidak kompatibel dengan CSS yang ada. Hambatan adopsi ini menjadi katalis pembuatan SCSS yang diperkenalkan dalam Sass 3.0 pada Oktober 2010: sintaks baru yang sepenuhnya kompatibel dengan CSS3 di mana file CSS apa pun yang valid juga valid SCSS. Fitur inti SCSS yaitu variabel dengan awalan $, nesting selektor, selektor induk & untuk pseudo-class dan varian, direktif @mixin dan @include untuk penggunaan ulang kode, serta @extend untuk pewarisan, memecahkan masalah pemeliharaan CSS murni pada skala besar yang telah dihadapi industri selama bertahun-tahun.
Ekosistem preprocessor CSS mencapai puncaknya antara 2012 dan 2018. LESS yang dibuat Alexis Sellier pada 2009 menjadi pesaing serius pertama Sass dengan adopsi masif melalui Bootstrap 3 pada 2013. Stylus menawarkan sintaks yang lebih fleksibel tetapi dengan adopsi yang lebih rendah. SCSS memenangkan pertarungan ekosistem sebagian karena adopsinya dalam Bootstrap 4 pada 2018 yang bermigrasi dari LESS ke SCSS, sebagian melalui integrasi dalam framework seperti Compass, dan sebagian karena menjadi standar dalam Angular. Implementasi Sass telah berkembang signifikan: Ruby Sass dari 2006 hingga 2019 yang sudah tidak dipertahankan, LibSass implementasi C/C++ yang digunakan node-sass dan tidak lagi digunakan sejak Oktober 2020, serta Dart Sass sebagai implementasi referensi saat ini yang tersedia sebagai paket npm sass sejak 2018.
Kebutuhan compiler SCSS online muncul dalam konteks alur kerja pengembangan frontend yang sangat spesifik. Yang paling umum adalah eksplorasi cepat: pengembang ingin menguji cara mixin tertentu dikompilasi, memverifikasi bahwa fungsi warna bekerja seperti yang diharapkan, atau memahami output CSS dari pola nesting tertentu tanpa membuat proyek baru. Kasus lainnya adalah bekerja di lingkungan tanpa izin instalasi: mesin korporat dengan pembatasan npm, lingkungan CI/CD read-only, atau sesi pelatihan di mana tidak dapat dipastikan semua peserta memiliki Node.js yang dikonfigurasi. Compiler Convertir.ai menggunakan Dart Sass yang dikompilasi ke WebAssembly, yang berjalan sepenuhnya di browser Anda dengan kecepatan sebanding compiler native, tanpa mengirim baris kode apa pun ke server eksternal, sehingga aman untuk mengompilasi stylesheet dari proyek produksi atau kode proprietary.