dart sass
1.81.0
Implementasi Dart dari Sass. Sass membuat CSS menyenangkan .
Menggunakan Dart Sass
Paket sass_api
Dart Sass di Peramban
API JavaScript Lama
Menggunakan Sass dengan Jest
Dari Chocolatey atau Scoop (Windows)
Dari Homebrew (macOS)
Mandiri
Dari npm
Dari Pub
Dari Sumber
Di Docker
Mengapa Dart?
Kebijakan Kompatibilitas
Kompatibilitas Peramban
Kompatibilitas Node.js
CSS tidak valid
Dart Sass Tertanam
Penggunaan
Perbedaan Perilaku dari Ruby Sass
Ada beberapa cara berbeda untuk menginstal dan menjalankan Dart Sass, bergantung pada lingkungan dan kebutuhan Anda.
Jika Anda menggunakan pengelola paket Chocolatey atau pengelola paket Scoop untuk Windows, Anda dapat menginstal Dart Sass dengan menjalankannya
choco install sass
atau
sendok instal sass
Itu akan memberi Anda sass yang dapat dieksekusi pada baris perintah Anda yang akan menjalankan Dart Sass. Lihat dokumen CLI untuk detailnya.
Jika Anda menggunakan manajer paket Homebrew, Anda dapat menginstal Dart Sass dengan menjalankannya
buatan instal sass/sass/sass
Itu akan memberi Anda sass yang dapat dieksekusi pada baris perintah Anda yang akan menjalankan Dart Sass.
Anda dapat mengunduh arsip Dart Sass mandiri untuk sistem operasi Anda—berisi Dart VM dan snapshot dari file yang dapat dieksekusi—dari halaman rilis GitHub. Ekstrak, tambahkan direktori ke jalur Anda, mulai ulang terminal Anda, dan sass executable siap dijalankan!
Dart Sass tersedia, dikompilasi ke JavaScript, sebagai paket npm. Anda dapat menginstalnya secara global menggunakan npm install -g sass yang akan memberikan akses ke sass yang dapat dieksekusi. Anda juga dapat menambahkannya ke proyek Anda menggunakan npm install --save-dev sass . Ini menyediakan executable serta perpustakaan:
const sass = require('sass');const result = sass.compile(scssFilename);// OR// Perhatikan bahwa `compileAsync()` jauh lebih lambat daripada `compile()`.const result = menunggu sass.compileAsync( scssNama File);Lihat situs web Sass untuk dokumentasi API lengkap.
Paket sass npm juga dapat dijalankan langsung di browser. Ini kompatibel dengan semua bundler web utama selama Anda menonaktifkan penggantian nama (seperti --keep-names di esbuild). Anda juga dapat mengimpornya langsung dari browser sebagai Modul ECMAScript tanpa bundling apa pun (dengan asumsi node_modules juga dilayani):
<skrip tipe = "peta impor">
{"imports": { "immutable": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"}
}</script><!-- Mendukung browser seperti Safari 16.3 tanpa dukungan impor peta. --><skrip async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
impor * sebagai sass dari 'sass';
console.log(sass.compileString(` .box { lebar: 10 piksel + 15 piksel; } `));</script>Atau dari CDN:
<skrip tipe = "peta impor">
{"impor": { "tidak dapat diubah": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"}
}</script><!-- Mendukung browser seperti Safari 16.3 tanpa dukungan impor peta. --><skrip async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
impor * sebagai sass dari 'sass';
console.log(sass.compileString(` .box { lebar: 10 piksel + 15 piksel; } `));</script>Atau bahkan dibundel dengan semua dependensinya:
<skrip tipe="modul">
impor * sebagai sass dari 'https://jspm.dev/sass';
console.log(sass.compileString(` .box { lebar: 10 piksel + 15 piksel; } `));</script> Karena browser tidak memiliki akses ke sistem file, fungsi compile() dan compileAsync() tidak tersedia untuk itu. Jika ingin memuat file lain, Anda harus meneruskan importir khusus ke compileString() atau compileStringAsync() . API lama juga tidak didukung di browser.
Dart Sass juga mendukung API JavaScript lama yang sepenuhnya kompatibel dengan Node Sass (dengan beberapa pengecualian tercantum di bawah), dengan dukungan untuk fungsi render() dan renderSync() . API ini dianggap tidak digunakan lagi dan akan dihapus di Dart Sass 2.0.0, jadi sebaiknya dihindari di proyek baru.
Dukungan Sass untuk API JavaScript lama memiliki batasan berikut:
Hanya nilai outputStyle "expanded" dan "compressed" yang didukung.
Dart Sass tidak mendukung opsi precision . Default Dart Sass memiliki presisi yang cukup tinggi untuk semua browser yang ada, dan jika ini dapat disesuaikan, kode tersebut akan menjadi kurang efisien.
Dart Sass tidak mendukung opsi sourceComments . Peta sumber adalah cara yang direkomendasikan untuk menemukan asal penyeleksi yang dihasilkan.
Jika Anda menggunakan Jest untuk menjalankan pengujian, ketahuilah bahwa Jest memiliki bug yang sudah berlangsung lama di mana lingkungan pengujian defaultnya merusak operator instanceof bawaan JavaScript. Paket JS Dart Sass menggunakan instanceof dengan cukup banyak, jadi untuk menghindari kerusakan Sass, Anda harus menginstal jest-environment-node-single-context dan menambahkan testEnvironment: 'jest-environment-node-single-context' ke konfigurasi Jest Anda .
Jika Anda pengguna Dart, Anda dapat menginstal Dart Sass secara global menggunakan pub global activate sass , yang akan menyediakan sass yang dapat dieksekusi. Anda juga dapat menambahkannya ke pubspec Anda dan menggunakannya sebagai perpustakaan. Kami sangat menyarankan untuk mengimpornya dengan awalan sass :
import 'paket:sass/sass.dart' sebagai sass;void main(Daftar<String> args) { print(sass.compile(args.first));
}Lihat dokumen Dart API untuk detailnya.
sass_api Pengguna Dart juga memiliki akses ke API yang lebih mendalam melalui paket sass_api . Ini memberikan akses ke Sass AST dan API untuk menyelesaikan beban Sass tanpa menjalankan kompilasi penuh. Itu dipisahkan ke dalam paketnya sendiri sehingga dapat meningkatkan nomor versinya secara independen dari paket sass utama.
Dengan asumsi Anda sudah memeriksa repositori ini:
Instal Dart. Jika Anda mengunduh arsip secara manual daripada menggunakan penginstal, pastikan direktori bin SDK ada di PATH Anda.
Instal Buf. Ini digunakan untuk membangun buffer protokol untuk kompiler yang tertanam.
Di repositori ini, jalankan dart pub get . Ini akan menginstal dependensi Dart Sass.
Jalankan dart run grinder protobuf . Ini akan mengunduh dan membangun definisi protokol yang tertanam.
Jalankan dart bin/sass.dart path/to/file.scss .
Itu saja!
Anda dapat menginstal dan menjalankan Dart Sass dalam Docker menggunakan perintah Dockerfile berikut:
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# Tambahkan file scss AndaCOPY --from=another_stage /app /app# Sertakan Protocol Buffer binerCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git clone https://github.com/sass/dart-sass.git . && pub panah dapatkan && dart run grinder protobuf# Di sinilah Anda menjalankan sass.dart pada file scss Anda.RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css
Dart Sass telah menggantikan Ruby Sass sebagai implementasi kanonik bahasa Sass. Kami memilih Dart karena memberikan sejumlah keunggulan:
Ini cepat. Dart VM sangat dioptimalkan, dan semakin cepat setiap saat (untuk angka performa terbaru, lihat perf.md ). Ini jauh lebih cepat daripada Ruby, dan hampir setara dengan C++.
Ini portabel. Dart VM tidak memiliki ketergantungan eksternal dan dapat mengkompilasi aplikasi menjadi file snapshot mandiri, sehingga kami dapat mendistribusikan Dart Sass hanya sebagai tiga file (VM, snapshot, dan skrip wrapper). Dart juga dapat dikompilasi ke JavaScript, yang memudahkan pendistribusian Sass melalui npm, yang sudah digunakan sebagian besar pengguna kami.
Sangat mudah untuk menulis. Dart adalah bahasa tingkat yang lebih tinggi daripada C++, yang berarti tidak memerlukan banyak kerumitan dalam manajemen memori dan sistem pembangunan. Ini juga diketik secara statis, yang membuatnya lebih mudah untuk membuat refactor besar dengan percaya diri dibandingkan dengan Ruby.
Ini lebih ramah terhadap kontributor. Dart jauh lebih mudah dipelajari dibandingkan Ruby, dan banyak pengguna Sass di Google khususnya sudah mengenalnya. Lebih banyak kontributor berarti pengembangan yang lebih cepat dan konsisten.
Untuk sebagian besar, Dart Sass mengikuti versi semantik. Kami menganggap semua hal berikut sebagai bagian dari API berversi:
Semantik bahasa Sass diimplementasikan oleh Dart Sass.
API Dart.
API JavaScript.
Antarmuka baris perintah.
Karena Dart Sass memiliki satu versi yang digunakan bersama di seluruh distribusi Dart, JavaScript, dan mandiri, ini mungkin berarti bahwa kami menambah nomor versi utama padahal sebenarnya tidak ada perubahan yang dapat menyebabkan gangguan pada satu atau lebih distribusi. Namun, kami akan berusaha membatasi jumlah perubahan yang dapat menyebabkan gangguan yang kami buat dan mengelompokkannya dalam rilis sesedikit mungkin untuk meminimalkan churn. Kami sangat menganjurkan pengguna untuk menggunakan changelog untuk memahami sepenuhnya semua perubahan di setiap rilis.
Ada satu pengecualian di mana perubahan yang dapat menyebabkan gangguan dapat dilakukan di luar revisi versi utama. Terkadang CSS menambahkan fitur yang tidak kompatibel dengan sintaksis Sass yang ada dalam beberapa hal. Karena Sass berkomitmen terhadap kompatibilitas penuh CSS, terkadang kami perlu memutuskan kompatibilitas dengan kode Sass lama agar tetap kompatibel dengan CSS.
Dalam kasus ini, pertama-tama kami akan merilis versi Sass yang mengeluarkan peringatan penghentian untuk setiap stylesheet yang perilakunya akan berubah. Kemudian, setidaknya tiga bulan setelah rilis versi dengan peringatan penghentian ini, kami akan merilis versi minor dengan perubahan besar pada semantik bahasa Sass.
Secara umum, kami menganggap perubahan apa pun pada keluaran CSS Dart Sass yang akan menyebabkan CSS tersebut berhenti berfungsi di browser sebenarnya sebagai perubahan yang dapat menyebabkan gangguan. Namun, ada beberapa kasus di mana perubahan tersebut akan memberikan manfaat besar dan hanya akan berdampak negatif pada sebagian kecil browser yang jarang digunakan. Kami tidak ingin memblokir perubahan seperti itu pada rilis versi utama.
Oleh karena itu, jika perubahan akan merusak kompatibilitas dengan kurang dari 2% pangsa pasar browser global menurut StatCounter GlobalStats, kami dapat merilis versi kecil Dart Sass dengan perubahan tersebut.
Kami menganggap penghentian dukungan untuk versi Node.js tertentu merupakan perubahan besar selama versi tersebut masih didukung oleh Node.js. Ini berarti rilis terdaftar sebagai LTS Saat Ini, LTS Aktif, atau LTS Pemeliharaan menurut halaman rilis Node.js. Setelah versi Node.js keluar dari LTS, Dart Sass menganggap dirinya bebas untuk menghentikan dukungan jika perlu.
Perubahan pada perilaku stylesheet Sass yang menghasilkan keluaran CSS tidak valid tidak dianggap sebagai perubahan yang dapat menyebabkan gangguan. Perubahan seperti itu hampir selalu diperlukan ketika menambahkan dukungan untuk fitur CSS baru, dan menunda semua fitur tersebut hingga versi utama yang baru akan terlalu membebani sebagian besar pengguna.
Misalnya, ketika Sass mulai menguraikan ekspresi calc() , ekspresi yang tidak valid calc(1 +) menjadi kesalahan Sass yang sebelumnya diteruskan sebagaimana adanya. Ini tidak dianggap sebagai perubahan yang dapat menyebabkan gangguan, karena calc(1 +) tidak pernah merupakan CSS yang valid sejak awal.
Dart Sass menyertakan implementasi sisi kompiler dari protokol Sass Tertanam. Ini dirancang untuk tertanam dalam bahasa host, yang kemudian memaparkan API bagi pengguna untuk memanggil Sass dan menentukan fungsi dan importir khusus.
sass --embedded memulai kompiler yang tertanam dan mendengarkan di stdin.
sass --embedded --version mencetak versionResponse dengan id = 0 di JSON dan keluar.
Tanda baris perintah --embedded tidak tersedia saat Anda menginstal Dart Sass sebagai paket npm. Tidak ada tanda baris perintah lain yang didukung dengan --embedded .
Ada beberapa perbedaan perilaku yang disengaja antara Dart Sass dan Ruby Sass. Ini umumnya merupakan tempat di mana Ruby Sass memiliki perilaku yang tidak diinginkan, dan jauh lebih mudah untuk menerapkan perilaku yang benar dibandingkan menerapkan perilaku yang kompatibel. Ini semua harus memiliki bug pelacakan terhadap Ruby Sass untuk memperbarui perilaku referensi.
@extend hanya menerima penyeleksi sederhana, seperti halnya argumen kedua selector-extend() . Lihat edisi 1599.
Pemilih subjek tidak didukung. Lihat edisi 1126.
Argumen pemilih semu diurai sebagai <declaration-value> daripada memiliki penguraian khusus yang lebih terbatas. Lihat edisi 2120.
Presisi numerik diatur ke 10. Lihat edisi 1122.
Pengurai sintaksis berindentasi lebih fleksibel: tidak memerlukan indentasi yang konsisten di seluruh dokumen. Lihat edisi 2176.
Warna tidak mendukung aritmatika saluran demi saluran. Lihat edisi 2144.
Bilangan tanpa satuan bukan == untuk bilangan satuan yang nilainya sama. Selain itu, kunci peta mengikuti logika yang sama seperti == -equality. Lihat edisi 1496.
Nilai alpha rgba() dan hsla() dengan satuan persentase diinterpretasikan sebagai persentase. Unit lain dilarang. Lihat edisi 1525.
Terlalu banyak argumen variabel yang diteruskan ke suatu fungsi adalah sebuah kesalahan. Lihat edisi 1408.
Izinkan @extend menjangkau di luar kueri media jika ada @extend identik yang ditentukan di luar kueri tersebut. Hal ini tidak dilacak secara eksplisit, karena tidak akan relevan ketika masalah 1050 telah diperbaiki.
Beberapa pseudo pemilih yang berisi pemilih placeholder akan dikompilasi di tempat yang tidak ada di Ruby Sass. Ini lebih cocok dengan semantik penyeleksi yang dimaksud, dan lebih efisien. Lihat edisi 2228.
Sintaks :property value gaya lama tidak didukung dalam sintaksis yang menjorok ke dalam. Lihat edisi 2245.
Kombinasi referensi tidak didukung. Lihat edisi 303.
Penyatuan pemilih universal bersifat simetris. Lihat edisi 2247.
@extend tidak menghasilkan kesalahan jika cocok tetapi gagal menyatukan. Lihat edisi 2250.
Dart Sass saat ini hanya mendukung dokumen UTF-8. Kami ingin mendukung lebih banyak lagi, namun Dart saat ini tidak mendukungnya. Lihat dart-lang/sdk#11744, misalnya.
Penafian: ini bukan produk resmi Google.
