Konversi Sass (Indented) ke CSS Online
Kompilasi sintaks Sass berindentasi (.sass) ke CSS murni. Gratis, di browser Anda, tanpa Ruby, Dart, atau Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Kasus penggunaan
Sass berindentasi ke CSS tanpa menginstal apa pun
Warisan Ruby Sass
Kompilasi file .sass dari proyek lama yang menggunakan Ruby Sass, tanpa perlu menginstalnya.
Tanpa dependensi
Tidak perlu Ruby, Dart, Node.js, atau npm. Berfungsi langsung di browser.
Belajar Sass
Coba sintaks Sass berindentasi asli dan lihat CSS yang dihasilkan secara instan.
100% privat
Kode Sass Anda tidak pernah dikirim ke server mana pun. Kompilasi terjadi di browser Anda.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tempel atau unggah file .sass Anda
Seret file .sass Anda atau tempel kode dengan sintaks berindentasi (tanpa kurung kurawal atau titik koma). File .scss tidak diterima.
Kompilasi instan
Kompiler Sass memproses kode Anda di browser dan langsung menghasilkan CSS valid. Kesalahan sintaks ditampilkan dengan nomor baris.
Salin atau unduh CSS-nya
Salin CSS yang dihasilkan ke clipboard atau unduh sebagai file .css yang siap digunakan dalam proyek web apa pun.
FAQ
Ada pertanyaan?
Keduanya adalah dua sintaks berbeda dari preprocessor Sass yang sama. Sintaks .sass (juga disebut sintaks berindentasi atau Sass original) dibuat oleh Hampton Catlin pada 2006 dan menggunakan indentasi untuk mendefinisikan hierarki aturan, tanpa kurung kurawal ({}) atau titik koma (;), mirip dengan sintaks Python atau CoffeeScript. Sintaks .scss (Sassy CSS) diperkenalkan dalam Sass 3 pada Mei 2010 dan menggunakan struktur kurung kurawal dan titik koma yang sama dengan CSS standar, membuatnya kompatibel dengan CSS yang sudah ada dan lebih mudah diadopsi oleh pengembang yang familiar dengan CSS. Alat ini mengompilasi secara eksklusif sintaks .sass berindentasi. Untuk .scss, gunakan alat scss-to-css.
Hampton Catlin merancang Sass pada 2006 saat bekerja sebagai pengembang web, dipengaruhi oleh pengalamannya dengan Haml (preprocessor lain yang ia buat untuk menyederhanakan HTML). Filosofinya adalah bahwa kode gaya harus lebih bersih dan kurang verbose dibandingkan CSS: menghapus kurung kurawal dan titik koma mengurangi noise visual dan memaksakan indentasi konsisten yang meningkatkan keterbacaan. Implementasi pertama Sass dibuat dalam Ruby, sebagai bagian dari framework Haml untuk Ruby on Rails. Selama beberapa tahun, Sass identik dengan sintaks berindentasi dan memerlukan Ruby untuk dikompilasi.
Sintaks .sass mendukung semua fitur Sass: variabel ($color: #333), nesting selektor, mixin (@mixin dan @include), pewarisan dengan @extend, fungsi dengan @function, operasi matematika, impor dengan @use dan @forward (sistem modul modern Dart Sass, diperkenalkan dalam Dart Sass 1.23 pada Oktober 2019 sebagai pengganti @import), direktif alur kontrol (@if, @each, @for, @while), interpolasi dengan #{}, dan operator selektor induk &. Satu-satunya perbedaan dari .scss adalah sintaksis: indentasi alih-alih kurung kurawal dan tanpa titik koma.
Ada beberapa skenario di mana Anda tidak ingin atau tidak dapat menginstal kompiler Sass di lingkungan Anda: saat bekerja di komputer bersama atau tanpa izin instalasi, di lingkungan CI/CD terbatas, saat perlu mengedit file .sass yang diwarisi dari proyek lama yang menggunakan Ruby Sass (yang mencapai akhir masa pakainya pada 26 Maret 2019), saat mempelajari Sass tanpa menyiapkan lingkungan pengembangan penuh, atau saat memerlukan pemeriksaan cepat atas CSS yang dihasilkan dari cuplikan Sass tertentu. Convertir.ai menjalankan kompiler Sass yang dikompilasi ke WebAssembly langsung di browser Anda, tanpa ketergantungan server.
Alat ini mengompilasi sintaks berindentasi (.sass) yang kompatibel dengan Dart Sass (implementasi referensi resmi sejak 2019, ketika Ruby Sass mencapai akhir masa pakainya pada 26 Maret 2019 dan LibSass tidak lagi didukung pada Oktober 2020). Sebagian besar kode .sass yang ditulis untuk Ruby Sass kompatibel dengan Dart Sass, kecuali sistem modul: @import telah tidak digunakan lagi di Dart Sass dan digantikan oleh @use dan @forward. Jika kode .sass Anda banyak menggunakan @import, CSS yang dihasilkan mungkin menyertakan peringatan deprecation, tetapi kompilasi tetap akan berfungsi.
Sintaks berindentasi memiliki para pendukung yang berpendapat bahwa sintaks ini menghasilkan kode yang lebih bersih dan lebih mudah dibaca: ketiadaan kurung kurawal dan titik koma mengurangi jumlah karakter, indentasi yang dipaksakan meningkatkan konsistensi kode, dan sintaksnya lebih mirip dengan bahasa modern seperti Python, CoffeeScript, atau Pug. Namun, adopsi .scss sangat dominan dalam industri: framework CSS modern (Bootstrap 5, Foundation, Tailwind dengan lapisan Sass-nya) menggunakan .scss, lingkungan pengembangan tipikal (webpack, Vite, Parcel) mengonfigurasi sass-loader atau plugin Vite untuk .scss secara default, dan sebagian besar pengembang lebih familiar dengan sintaks kurung kurawal CSS. Untuk proyek baru, .scss biasanya pilihan yang lebih pragmatis karena ketersediaan tool, snippet, dan dukungan IDE yang lebih baik.
Kompilasi Sass ke CSS: sintaks .sass berindentasi, warisan Ruby Sass, dan perbedaan .sass vs .scss
Sass (Syntactically Awesome Style Sheets) dibuat oleh Hampton Catlin pada 2006, dengan implementasi pertama yang dikembangkan oleh Nathan Weizenbaum dalam Ruby. Sintaks Sass asli, yang dikenal sebagai sintaks berindentasi atau hanya Sass (dengan ekstensi .sass), terinspirasi dari filosofi Haml yaitu preprocessor lain yang dibuat Catlin untuk menyederhanakan HTML dalam aplikasi Ruby on Rails. Sintaks berindentasi menghilangkan dua elemen CSS yang dianggap Catlin sebagai noise visual yang tidak diperlukan: kurung kurawal ({}) yang membatasi blok deklarasi, dan titik koma (;) yang memisahkan deklarasi individual. Sebaliknya, hierarki didefinisikan melalui indentasi, mirip dengan Python, CoffeeScript, atau versi modern Pug (dulu Jade). Keputusan desain ini membuat kode .sass jauh lebih ringkas: blok CSS yang memerlukan 6 karakter sintaks (kurung buka, baris baru, titik koma, baris baru, kurung tutup) diperkecil menjadi hanya indentasi. Versi publik pertama Sass dirilis pada November 2006 sebagai bagian dari framework Haml untuk Ruby on Rails, dan selama beberapa tahun pertama keberadaannya, mengompilasi Sass memerlukan Ruby yang terinstal.
Pada Mei 2010, Sass 3 memperkenalkan sintaks SCSS (Sassy CSS, dengan ekstensi .scss), yang dirancang sebagai superset CSS: setiap file CSS valid juga merupakan file SCSS valid. Keputusan strategis ini secara masif mempercepat adopsi Sass dalam industri, karena pengembang dapat memigrasikan proyek CSS yang sudah ada ke SCSS hanya dengan mengganti nama file. Bootstrap mengadopsi Sass (dalam varian SCSS-nya) di Bootstrap 3.0 pada Agustus 2013, yang mengkonsolidasikan SCSS sebagai standar de facto untuk preprocessor CSS. Dart Sass, implementasi referensi Sass saat ini, diluncurkan oleh Natalie Weizenbaum dan tim Google sebagai implementasi utama pada November 2016. Ruby Sass mencapai akhir masa pakainya pada 26 Maret 2019, dan LibSass (implementasi C++, lebih cepat, digunakan oleh node-sass) secara resmi tidak lagi didukung pada Oktober 2020. Sejak saat itu, Dart Sass adalah satu-satunya implementasi yang dirawat secara aktif. Dart Sass sepenuhnya mendukung sintaks .sass berindentasi, selain SCSS.
Kebutuhan untuk mengompilasi sintaks .sass tanpa menginstal Ruby, Dart, atau Node muncul dalam beberapa konteks praktis. Yang paling umum adalah pemeliharaan proyek lama: ribuan proyek web yang dikembangkan antara 2006 dan 2014 menggunakan sintaks .sass dengan Ruby Sass, dan ketika seorang pengembang perlu memodifikasi gaya salah satu proyek ini tanpa menyiapkan lingkungan pengembangan asli (yang mungkin memerlukan versi Ruby tertentu, gem Sass pada versi tertentu, dan potensial Bundler dengan Gemfile tertentu), memiliki kompiler online adalah solusi tercepat. Konteks lain adalah pendidikan: sintaks berindentasi Sass sering diajarkan dalam kursus pengembangan web sebagai contoh preprocessor CSS karena secara jelas menggambarkan konsep nesting dan pewarisan selektor; siswa yang mempelajari Sass di lingkungan pendidikan terbatas (Chromebook, lab komputer, lingkungan sandbox) tidak dapat menginstal kompiler lokal. Terakhir, mengonversi .sass ke CSS adalah langkah pertama untuk memigrasikan proyek yang menggunakan sintaks berindentasi ke SCSS atau ke solusi modern berbasis PostCSS, CSS custom properties (variabel CSS native, didukung di semua browser modern sejak 2017), atau CSS nesting (spesifikasi CSS Nesting, diimplementasikan di Chrome 112, Firefox 117, dan Safari 16.5, yang membuat sebagian besar fungsionalitas nesting Sass tidak lagi diperlukan untuk proyek yang hanya perlu mendukung browser saat ini).