Cara menggunakan Kompiler SCSS ke CSS
- Tempel SCSS kamu, atau pindah ke sintaks Sass dengan indentasi.
- CSS dikompilasi saat kamu mengetik. Jika ada error, baris dan kolomnya akan ditampilkan.
- 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?
sass di command line.