Kompiler SCSS ke CSS — Sass Online

Tempel SCSS atau Sass format indentasi, lalu dapatkan CSS biasa yang dikompilasi oleh mesin resmi Dart Sass langsung di browser kamu. Pesan error jelas dan menunjuk ke baris yang tepat.

Diperbarui
Sintaks
Output

Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.

Apakah alat ini membantu?0.0 0 penilaian
Kompilasi LESS ke CSS online dengan compiler resmi Less.jsVariabel, mixin, nesting, operasi dan guard.LESS ke CSS Compiler →

Cara menggunakan Kompiler SCSS ke CSS

  1. Tempel SCSS kamu, atau pindah ke sintaks Sass dengan indentasi.
  2. CSS dikompilasi saat kamu mengetik. Jika ada error, baris dan kolomnya akan ditampilkan.
  3. Pilih output rapi atau minified, lalu salin atau unduh CSS-nya.

Apa saja yang didukung kompiler ini

Ini adalah Dart Sass, implementasi referensi dari Sass, yang berjalan di browser kamu. Semua fitur bahasanya bisa dipakai: variabel, nesting dengan &, mixin dan @include, @extend, fungsi, map, loop, kondisi @if, serta sistem modul dengan @use untuk modul bawaan seperti sass:math dan sass:color.

SCSS vs Sass indentasi

SCSS adalah superset dari CSS yang memakai kurung kurawal dan titik koma. Setiap CSS yang valid juga valid di SCSS. Sintaks indentasi yang lebih lama (file .sass) memakai indentasi sebagai pengganti kurung kurawal dan baris baru sebagai pengganti titik koma. Keduanya menghasilkan CSS yang sama, jadi pilih sesuai format file kamu.

Import dari file lain

Browser tidak bisa membaca file lain di proyek kamu, jadi @use "variables" atau @import "mixins" yang mengarah ke partial milikmu tidak akan bisa diselesaikan di sini. Tempel isi partial tersebut di atas kode yang memakainya. Peringatan deprecation dari Sass, misalnya untuk darken(), akan ditampilkan di bawah output beserta saran penggantinya.

Privat sejak awal

Kompilasi berjalan sepenuhnya di browser kamu. Kode kamu tidak pernah diunggah, jadi aman untuk proyek yang bersifat rahasia.

Juga dicari sebagai: scss ke css, sass ke css, kompiler scss, kompiler sass online, ubah scss ke css, compile sass online, konverter scss.

Tool yang cocok dipakai bersama Kompiler SCSS ke CSS

  • LESS ke CSS Compiler — Tempel kode Less dan dapatkan CSS biasa, dikompilasi oleh mesin resmi Less.js langsung di browser kamu.
  • CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
  • CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
  • Konverter CSS ke Tailwind — Tempel aturan atau deklarasi CSS dan dapatkan utility class Tailwind yang setara untuk setiap selector, termasuk state hover: dan arbitrary value seperti p-[13px].

Pertanyaan yang sering diajukan

Apakah ini kompiler Sass yang asli?
Ya, ini Dart Sass, implementasi resmi yang dikompilasi ke JavaScript. Hasil CSS-nya sama dengan yang dihasilkan oleh perintah sass di command line.
Bisakah saya mengubah CSS menjadi SCSS?
Semua CSS sudah merupakan SCSS yang valid, jadi kamu cukup mengganti nama file .css menjadi .scss. Nesting dan variabel bisa ditambahkan secara manual saat kamu merapikan kode.
Kenapa muncul peringatan deprecation?
Sass sedang menghapus fungsi global seperti darken() dan @import secara bertahap. Peringatan akan menampilkan pengganti yang modern, misalnya color.adjust() dan @use.
Bisakah saya memasang Kompiler SCSS ke CSS sebagai aplikasi web dan memakainya offline?
Bisa. Kompiler SCSS ke CSS adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait