Tidak suka iklan? Pergi Bebas Iklan Hari ini 

SCSS / Sass Formatter & Beautifier

PengembangTeks

IKLAN · MENGHAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · MENGHAPUS?

Memandu

SCSS / Sass Formatter & Beautifier

Format dan percantik kode SCSS Anda secara instan. Tempelkan stylesheet yang berantakan atau terkompresi dan dapatkan output yang bersih, terindentasi dengan benar dengan penumpukan yang tepat, spasi yang konsisten, dan aturan-aturan yang terorganisir. Mendukung mode output yang diperluas, ringkas, dan diminifikasi.

Cara Penggunaan

Tempelkan kode SCSS Anda ke area masukan. Pilih ukuran indentasi, format output, dan gaya kurung kurawal pilihan Anda. Kode yang diformat diperbarui secara instan di panel output — salin dengan satu klik. Beralih antara mode yang diperluas, ringkas, dan diminifikasi tergantung pada apakah Anda memerlukan output yang dapat dibaca atau siap produksi.

Fitur

Dukungan Penumpukan SCSS – Memformat pemilih bersarang yang dalam dengan benar, pemilih induk ("&"), dan aturan-aturan bersarang seperti @media Dan @supports.
Penanganan Variabel & Mixin – Memformat variabel SCSS dengan benar ("$variable), @mixin, @include, @extend, @use, Dan @forward direktif.
Tiga Mode Output – Diperluas (satu deklarasi per baris, sepenuhnya dapat dibaca), Ringkas (satu aturan per baris), dan Diminifikasi (semua spasi putih dikupas untuk produksi).
Indentasi yang Dapat Dikonfigurasi – Pilih antara 2 spasi, 4 spasi, atau tab.
Opsi Gaya Kurung Kurawal – Penempatan kurung kurawal pembuka di baris yang sama atau baris berikutnya.
Normalisasi Spasi Putih – Spasi yang konsisten setelah titik dua, sebelum kurung kurawal, dan di antara blok aturan.
Pemformatan Waktu Nyata – Keluaran diperbarui secara instan saat Anda mengetik atau mengubah opsi apa pun.

Kapan Menggunakan Alat Ini

Gunakan alat ini saat membersihkan stylesheet SCSS untuk tinjauan kode, memformat ulang CSS yang diminifikasi kembali ke SCSS yang dapat dibaca, atau menstandarisasi indentasi di seluruh file gaya proyek. Ini sangat berguna untuk mengonversi antara format yang diperluas dan diminifikasi, atau untuk mempercantik cuplikan SCSS dengan cepat untuk dokumentasi dan tutorial.

IKLAN · MENGHAPUS?

 Tanya Jawab Umum

Apa perbedaan antara SCSS dan Sass?

SCSS (Sassy CSS) dan Sass adalah dua sintaks untuk preprocessor yang sama. SCSS menggunakan kurung kurawal dan titik koma seperti CSS biasa — setiap CSS yang valid juga merupakan SCSS yang valid. Sintaks Sass dengan indentasi menggunakan indentasi alih-alih kurung kurawal dan baris baru alih-alih titik koma. SCSS jauh lebih populer karena akrab bagi pengembang CSS dan lebih mudah diadopsi secara bertahap. Sebagian besar proyek modern menggunakan ekstensi file .scss.
Apa itu variabel SCSS dan mengapa menggunakannya?

Variabel SCSS (dideklarasikan dengan $) menyimpan nilai yang dapat digunakan kembali seperti warna, ukuran font, spasi, dan breakpoint. Misalnya, $primary-color: #3498db; memungkinkan Anda mereferensikan warna yang sama di seluruh stylesheet Anda dan mengubahnya di satu tempat. Meskipun properti khusus CSS (--variable) sekarang menawarkan fungsionalitas serupa secara native, variabel SCSS adalah nilai waktu kompilasi yang memungkinkan fitur yang lebih kuat seperti interpolasi dalam pemilih dan operasi matematika.
Apa itu penumpukan SCSS dan kapan saya harus menggunakannya?

Penumpukan SCSS memungkinkan Anda menulis pemilih turunan di dalam pemilih induk, mencerminkan struktur HTML Anda. Misalnya, .nav { .item { color: blue; } } dikompilasi menjadi .nav .item { color: blue; }. Penumpukan meningkatkan keterbacaan untuk gaya terkait, tetapi penumpukan berlebihan (lebih dari 3-4 tingkat kedalaman) membuat pemilih yang terlalu spesifik yang sulit untuk ditimpa. Aturan umumnya: menumpuk untuk struktur, bukan untuk setiap hubungan induk-anak.
Apa perbedaan antara @mixin dan @extend di SCSS?

@mixin membuat blok CSS yang dapat digunakan kembali yang disalin di mana pun Anda @include mereka — seperti fungsi yang menghasilkan CSS. @extend membagikan gaya pemilih dengan menambahkan pemilih yang diperluas ke aturan asli — ia mengelompokkan pemilih alih-alih menduplikasi kode. Gunakan @mixin saat Anda memerlukan parameter atau saat gaya bervariasi antar penggunaan. Gunakan @extend untuk pewarisan gaya sederhana di mana Anda menginginkan output CSS minimal. Penggunaan @extend yang berlebihan dapat membuat rantai pemilih yang tidak terduga.