simpul sass
v9.0.0
Peringatan: Node Sass telah mencapai akhir masa pakainya. Ia tidak akan menerima rilis lagi, bahkan untuk perbaikan keamanan. Proyek yang masih menggunakannya harus dipindahkan ke Dart Sass.
Versi Node.js yang didukung bervariasi berdasarkan rilis, silakan lihat halaman rilis.
Versi node yang mencapai akhir masa pakainya https://github.com/nodejs/Release, akan dihapus dari dukungan pada setiap rilis node-sass (mayor, minor).
Kami akan berhenti membuat binari untuk rilis yang tidak didukung, menguji kerusakan pada kompatibilitas ketergantungan, namun kami tidak akan memblokir instalasi bagi rilis yang ingin mendukung dirinya sendiri.
Rilis node baru memerlukan perubahan internal kecil bersama dengan dukungan dari penyedia CI (AppVeyor, GitHub Actions). Kami akan membuka satu terbitan bagi pihak yang berkepentingan untuk berlangganan, dan menutup terbitan tambahan.
Di bawah ini adalah panduan singkat untuk versi node-sass minimum dan maksimum yang didukung:
| NodeJS | Versi node-sass yang didukung | Modul Node |
|---|---|---|
| simpul 20 | 9.0+ | 115 |
| simpul 19 | 8.0+ | 111 |
| simpul 18 | 8.0+ | 108 |
| simpul 17 | 7.0+, <8.0 | 102 |
| simpul 16 | 6.0+ | 93 |
| simpul 15 | 5.0+, <7.0 | 88 |
| simpul 14 | 4.14+, <9.0 | 83 |
| simpul 13 | 4.13+, <5.0 | 79 |
| simpul 12 | 4.12+, <8.0 | 72 |
| simpul 11 | 4.10+, <5.0 | 67 |
| simpul 10 | 4.9+, <6.0 | 64 |
| simpul 8 | 4.5.3+, <5.0 | 57 |
| simpul <8 | <5.0 | <57 |
Ini memungkinkan Anda mengkompilasi file .scss ke css secara asli dengan kecepatan luar biasa dan secara otomatis melalui middleware koneksi.
Temukan di npm: https://www.npmjs.com/package/node-sass
Ikuti @nodesass di twitter untuk pembaruan rilis: https://twitter.com/nodesass
npm instal node-sass
Beberapa pengguna telah melaporkan masalah instalasi di Ubuntu karena node didaftarkan ke paket lain. Ikuti dokumen resmi NodeJS untuk menginstal NodeJS sehingga #!/usr/bin/env node terselesaikan dengan benar.
Kompilasi pada mesin Windows memerlukan prasyarat node-gyp.
Apakah Anda melihat kesalahan berikut? Lihat panduan Pemecahan Masalah kami.**
SyntaxError: Use of const in strict mode.
Mengalami masalah instalasi? Lihat panduan Pemecahan Masalah kami.
npm install -g mirror-config-china --registry=https://registry.npmmirror.com npm instal node-sass
var sass = memerlukan('node-sass');sass.render({
file: scss_namafile,
[, pilihan..]}, function(err, hasil) { /*...*/ });// ORvar hasil = sass.renderSync({
data: scss_content
[, pilihan..]}); Jenis: String
Bawaan: null
Khusus : file atau data harus ditentukan
Jalur ke file untuk dikompilasi oleh LibSass.
Jenis: String
Bawaan: null
Khusus : file atau data harus ditentukan
Sebuah string untuk diteruskan ke LibSass untuk dikompilasi. Disarankan agar Anda menggunakan includePaths bersamaan dengan ini sehingga LibSass dapat menemukan file saat menggunakan direktif @import .
Ini adalah fitur eksperimental LibSass. Gunakan dengan hati-hati.
Jenis: Function | Function[] function(url, prev, done)
Bawaan: undefined
Parameter Fungsi dan Informasi:
url (String) - jalur dalam import as-is , yang ditemui LibSass
prev (String) - jalur yang diselesaikan sebelumnya
done (Function) - fungsi panggilan balik untuk dipanggil pada penyelesaian async, mengambil objek yang berisi literal
file (String) - jalur alternatif bagi LibSass untuk menggunakan OR
contents (String) - konten yang diimpor (misalnya, dibaca dari memori atau sistem file)
Menangani ketika LibSass menemukan direktif @import . Importir khusus mengizinkan perluasan mesin LibSass secara sinkron dan asinkron. Dalam kedua kasus tersebut, tujuannya adalah return atau memanggil done() dengan literal objek. Bergantung pada nilai literal objek, salah satu dari dua hal akan terjadi.
Saat mengembalikan atau memanggil done() dengan { file: "String" } , jalur file baru akan diasumsikan untuk @import . Disarankan untuk memperhatikan nilai prev jika resolusi jalur relatif mungkin diperlukan.
Saat mengembalikan atau memanggil done() dengan { contents: "String" } , nilai string akan digunakan seolah-olah file dibaca melalui sumber eksternal.
Mulai dari v3.0.0:
this mengacu pada cakupan kontekstual untuk menjalankan sass.render atau sass.renderSync secara langsung
importir dapat mengembalikan kesalahan dan LibSass akan mengeluarkan kesalahan itu sebagai respons. Misalnya:
selesai(Kesalahan baru('tidak ada!'));// atau kembalikan secara sinkron mengembalikan Kesalahan baru('tidak ada yang bisa dilakukan di sini'); importir dapat berupa array fungsi, yang akan dipanggil oleh LibSass sesuai urutan kemunculannya dalam array. Ini membantu pengguna menentukan importir khusus untuk jenis jalur tertentu (sistem file, http). Jika importir tidak ingin menangani jalur tertentu, importir harus mengembalikan null . Lihat bagian fungsi untuk detail lebih lanjut tentang tipe Sass.
Ini adalah fitur eksperimental LibSass. Gunakan dengan hati-hati.
functions adalah Object yang menyimpan kumpulan fungsi khusus yang dapat dipanggil oleh file sass yang sedang dikompilasi. Mereka mungkin mengambil nol atau lebih parameter masukan dan harus mengembalikan nilai baik secara sinkron ( return ...; ) atau asinkron ( done(); ). Parameter tersebut akan menjadi instance dari salah satu konstruktor yang terdapat dalam hash require('node-sass').types . Nilai yang dikembalikan juga harus salah satu dari jenis ini. Lihat daftar tipe yang tersedia di bawah ini:
getValue() / setValue(value) : mendapatkan / menyetel bagian numerik dari angka tersebut
getUnit() / setUnit(unit) : mendapatkan / menyetel bagian satuan dari nomor tersebut
getValue() / setValue(value) : mendapatkan / menyetel string yang disertakan
getR() / setR(value) : komponen merah (integer dari 0 hingga 255 )
getG() / setG(value) : komponen hijau (integer dari 0 hingga 255 )
getB() / setB(value) : komponen biru (integer dari 0 hingga 255 )
getA() / setA(value) : komponen alfa (angka dari 0 hingga 1.0 )
Contoh:
var Warna = memerlukan('node-sass').types.Warna,
c1 = Warna baru (255, 0, 0),
c2 = Warna baru (0xff0088cc); getValue() : mendapatkan boolean terlampir
types.Boolean.TRUE : Contoh tunggal dari types.Boolean yang berisi "benar"
types.Boolean.FALSE : Contoh tunggal dari types.Boolean yang menampung "false"
getValue(index) / setValue(index, value) : value itu sendiri harus berupa turunan dari salah satu konstruktor di sass.types .
getSeparator() / setSeparator(isComma) : apakah akan menggunakan koma sebagai pemisah
getLength()
getKey(index) / setKey(index, value)
getValue(index) / setValue(index, value)
getLength()
types.Null.NULL : Contoh tunggal dari types.Null .
sass.renderSync({
data: '#{heading(2,5)} { warna: #08c; }',
fungsi: {'headings($from: 0, $to: 6)': function(from, to) { var i, f = from.getValue(), t = to.getValue(), list = new sass.types .Daftar(t - f + 1); for (i = f; i <= t; i++) {list.setValue(i - f, new sass.types.String('h' + i)); } daftar pengembalian;}
}}); Ketik: Array
Bawaan: []
Serangkaian jalur yang dapat dilihat oleh LibSass untuk mencoba menyelesaikan deklarasi @import Anda. Saat menggunakan data , disarankan agar Anda menggunakan ini.
Jenis: Boolean
Bawaan: false
nilai true mengaktifkan Sintaks Indentasi Sass untuk menguraikan string data atau file.
Catatan: node-sass/libsass akan mengkompilasi perpustakaan campuran file scss dan sintaks indentasi (.sass) dengan pengaturan Default (false) selama ekstensi .sass dan .scss digunakan dalam nama file.
Jenis: String
Bawaan: space
Digunakan untuk menentukan apakah akan menggunakan karakter spasi atau tab untuk indentasi.
Jenis: Number
Bawaan: 2
Maksimum: 10
Digunakan untuk menentukan jumlah spasi atau tab yang akan digunakan untuk indentasi.
Jenis: String
Bawaan: lf
Digunakan untuk menentukan apakah akan menggunakan urutan cr , crlf , lf atau lfcr untuk jeda baris.
Jenis: Boolean
Bawaan: false
Spesial: Saat menggunakan ini, Anda juga harus menentukan outFile untuk menghindari perilaku yang tidak terduga.
nilai true menonaktifkan penyertaan informasi peta sumber dalam file keluaran.
Jenis: String | null
Bawaan: null
Khusus: Diperlukan ketika sourceMap adalah nilai kebenaran
Tentukan lokasi yang diinginkan dari file keluaran. Sangat disarankan saat mengeluarkan peta sumber sehingga peta tersebut dapat merujuk kembali ke file yang dimaksudkan dengan benar.
Perhatian mengaktifkan opsi ini tidak akan menulis file pada disk untuk Anda, ini hanya untuk tujuan referensi internal (misalnya untuk menghasilkan peta).
Contoh cara menulisnya ke disk
sass.render({...outFile: yourPathTotheFile,
}, function(error, result) { // callback gaya simpul dari v3.0.0 dan seterusnyaif(!error){ // Tidak ada kesalahan selama kompilasi, tulis hasil ini ke disk fs.writeFile(yourPathTotheFile, result.css, function (err){if(!err){ //file tertulis di disk} });}
});}); Jenis: String
Bawaan: nested
Nilai: nested , expanded , compact , compressed
Menentukan format keluaran gaya CSS akhir.
Jenis: Integer
Bawaan: 5
Digunakan untuk menentukan berapa banyak digit setelah desimal yang diperbolehkan. Misalnya, jika Anda memiliki angka desimal 1.23456789 dan presisi 5 , hasilnya akan menjadi 1.23457 di CSS akhir.
Jenis: Boolean
Bawaan: false
true Mengaktifkan nomor baris dan file di mana pemilih ditentukan untuk dimasukkan ke dalam CSS yang dikompilasi sebagai komentar. Berguna untuk debugging, terutama saat menggunakan impor dan mixin.
Jenis: Boolean | String | undefined
Bawaan: undefined
Mengaktifkan pembuatan peta sumber selama render dan renderSync .
Ketika sourceMap === true , nilai outFile digunakan sebagai lokasi keluaran target untuk peta sumber dengan akhiran .map ditambahkan. Jika tidak ada outFile yang disetel, parameter sourceMap diabaikan.
Ketika typeof sourceMap === "string" , nilai sourceMap akan digunakan sebagai lokasi penulisan file.
Jenis: Boolean
Bawaan: false
true mencakup contents dalam informasi peta sumber
Jenis: Boolean
Bawaan: false
true menyematkan peta sumber sebagai URI data
Jenis: String
Bawaan: undefined
nilainya akan dikeluarkan sebagai sourceRoot dalam informasi peta sumber
render Panggilan Balik (>= v3.0.0) node-sass mendukung callback asinkron gaya node standar dengan tanda tangan function(err, result) . Dalam kondisi kesalahan, argumen error diisi dengan objek kesalahan. Dalam kondisi sukses, objek result diisi dengan objek yang menjelaskan hasil panggilan render.
message (String) - Pesan kesalahan.
line (Nomor) - Nomor baris kesalahan.
column (Nomor) - Jumlah kolom kesalahan.
status (Nomor) - Kode status.
file (String) - Nama file kesalahan. Jika opsi file tidak disetel (mendukung data ), ini akan mencerminkan nilai stdin .
css (Buffer) - CSS yang dikompilasi. Tulis ini ke file, atau sajikan sesuai kebutuhan.
map (Buffer) - Peta sumber
stats (Objek) - Objek yang berisi informasi tentang kompilasi. Ini berisi kunci-kunci berikut:
entry (String) - Jalur ke file scss, atau data jika sumbernya bukan file
start (Nomor) - Tanggal.sekarang() sebelum kompilasi
end (Nomor) - Tanggal.sekarang() setelah kompilasi
duration (Nomor) - akhir - awal
includedFiles (Array) - Jalur absolut ke semua file scss terkait tanpa urutan tertentu.
var sass = memerlukan('node-sass');sass.render({
file: '/path/ke/myFile.scss',
data: 'tubuh{latar belakang:biru; a{warna:hitam;}}',
pengimpor: fungsi(url, sebelumnya, selesai) {// url adalah jalur yang diimpor apa adanya, yang ditemui LibSass.// sebelumnya adalah jalur yang diselesaikan sebelumnya.// selesai adalah panggilan balik opsional, baik menggunakannya atau mengembalikan nilai secara sinkron .// this.options berisi hash opsi ini, this.callback berisi callbacksomeAsyncFunction(url, prev, function(result) bergaya simpul){ selesai({file: result.path, // hanya satu yang diperlukan, lihat bagian Perilaku Khusus.isi: hasil.data });});// ORvar hasil = someSyncFunction(url, prev);return {file: result.path, isi: hasil.data};
},
sertakanPaths: [ 'lib/', 'mod/' ],
outputStyle: 'compressed'}, function(error, result) { // callback bergaya node dari v3.0.0 dan seterusnya
if (kesalahan) {console.log(error.status); // dulunya adalah "kode" di v2x dan di bawahconsole.log(error.column);console.log(error.message);console.log(error.line);
}
else {console.log(result.css.toString());console.log(result.stats);console.log(result.map.toString());// atau Betterconsole.log(JSON.stringify(result. peta)); // catatan, JSON.stringify menerima Buffer juga
}});// Hasil ORvar = sass.renderSync({
file: '/path/ke/file.scss',
data: 'tubuh{latar belakang:biru; a{warna:hitam;}}',
outputStyle: 'terkompresi',
file keluar: '/ke/saya/output.css',
sourceMap: true, // atau jalur absolut atau relatif (ke outFile).
pengimpor: fungsi(url, sebelumnya, selesai) {// url adalah jalur yang diimpor apa adanya, yang ditemui LibSass.// sebelumnya adalah jalur yang diselesaikan sebelumnya.// selesai adalah panggilan balik opsional, baik menggunakannya atau mengembalikan nilai secara sinkron .// this.options berisi opsi ini hashsomeAsyncFunction(url, prev, function(result){ selesai({file: result.path, // hanya satu yang diperlukan, lihat bagian Perilaku Khusus.isi: hasil.data }) ;});// ORvar result = someSyncFunction(url, prev);return {file: result.path, isi: result.data};
}});console.log(result.css);console.log(result.map);console.log(result.stats); Jika opsi file dan data disetel, node-sass akan mengutamakan data dan menggunakan file untuk menghitung jalur di peta sumber.
Info versi node-sass dan libsass sekarang diekspos melalui metode info :
var sass = require('node-sass');console.log(sass.info);/* akan menampilkan sesuatu seperti: node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Sass Compiler) [ C/C++]*/Karena versi node-sass >=v3.0.0 LibSass ditentukan pada saat run time.
Daftar penggunaan node-sass oleh komunitas dalam alat dan kerangka kerja pembangunan.
@jasonsanjose telah membuat ekstensi Brackets berdasarkan node-sass: https://github.com/jasonsanjose/brackets-sass. Saat mengedit file Sass, ekstensi mengkompilasi perubahan saat disimpan. Ekstensi ini juga terintegrasi dengan Live Preview untuk menampilkan perubahan Sass di browser tanpa menyimpan atau mengompilasi.
Plugin sass resmi Brunch menggunakan node-sass secara default, dan secara otomatis kembali ke Ruby jika penggunaan Compass terdeteksi: https://github.com/brunch/sass-brunch
Kompilasi ulang file .scss secara otomatis untuk server http berbasis koneksi dan ekspres.
Fungsionalitas ini telah dipindahkan ke node-sass-middleware di node-sass v1.0.0
@10xLaCroixDrinker menulis plugin DocPad yang mengkompilasi file .scss menggunakan node-sass: https://github.com/docpad/docpad-plugin-nodesass
@stephenway telah membuat ekstensi yang mengubah Sass ke CSS menggunakan node-sass dengan duo.js https://github.com/duojs/sass
@sindresorhus telah membuat serangkaian tugas kasar berdasarkan node-sass: https://github.com/sindresorhus/grunt-sass
@dlmanning telah membuat plugin gulp sass berdasarkan node-sass: https://github.com/dlmanning/gulp-sass
Server web Harp @sintaxi secara implisit mengkompilasi file .scss menggunakan node-sass: https://github.com/sintaxi/harp
@stevenschobert telah membuat plugin metalsmith berdasarkan node-sass: https://github.com/stevenschobert/metalsmith-sass
@fourseven telah membuat plugin meteor berdasarkan node-sass: https://github.com/fourseven/meteor-scss
@dbashford telah membuat modul Mimosa untuk sass yang mencakup node-sass: https://github.com/dbashford/mimosa-sass
Ada juga contoh aplikasi koneksi di sini: https://github.com/andrew/node-sass-example
Node-sass menyertakan biner yang telah dikompilasi sebelumnya untuk platform populer, untuk menambahkan biner untuk platform Anda, ikuti langkah-langkah berikut:
Lihat proyeknya:
git clone --rekursif https://github.com/sass/node-sass.gitcd node-sass instalasi npm node scripts/build -f # gunakan -d switch untuk rilis debug# jika berhasil, ini akan menghasilkan dan memindahkan# biner di direktori vendor.
Antarmuka untuk penggunaan baris perintah cukup sederhana pada tahap ini, seperti yang terlihat pada bagian penggunaan berikut.
Output akan dikirim ke stdout jika flag --output dihilangkan.
node-sass [options] [output] Atau: cat | node-sass > output
Contoh:
node-sass src/style.scss dest/style.css
Pilihan:
-w, --watch Melihat direktori atau file
-r, --recursive Melihat direktori atau file secara rekursif
-o, --output Direktori keluaran
-x, --omit-source-map-url Hilangkan komentar URL peta sumber dari output
-i, --indented-syntax Perlakukan data dari stdin sebagai kode sass (versus scss)
-q, --quiet Menekan keluaran log kecuali jika ada kesalahan
-v, --version Mencetak info versi
--gaya keluaran CSS gaya keluaran (bersarang | diperluas | kompak | terkompresi)
--indent-type Tipe indentasi untuk keluaran CSS (spasi | tab)
--indent-width Lebar indentasi; jumlah spasi atau tab (nilai maksimum: 10)
--linefeed Gaya Linefeed (cr | crlf | lf | lfcr)
--source-comments Sertakan info debug dalam keluaran
--source-map Memancarkan peta sumber
--source-map-contents Sematkan sertakan konten dalam peta
--source-map-embed Sematkan sourceMappingUrl sebagai URI data
--source-map-root Jalur dasar, akan dipancarkan di peta sumber apa adanya
--include-path Jalur untuk mencari file yang diimpor
--ikuti Ikuti direktori yang terhubung dengan symlink
--presisi Jumlah presisi yang diperbolehkan dalam angka desimal
--error-bell Menampilkan karakter lonceng jika ada kesalahan
--importer Jalur ke file .js yang berisi importir khusus
--functions Jalur ke file .js yang berisi fungsi khusus
--membantu Cetak info penggunaan input dapat berupa satu .scss atau .sass , atau sebuah direktori. Jika inputnya berupa direktori, flag --output juga harus diberikan.
Selain itu, catatan --importer mengambil jalur (mutlak atau relatif terhadap pwd) ke file js, yang harus memiliki module.exports default yang disetel ke fungsi importir. Lihat perlengkapan pengujian kami misalnya.
Opsi --source-map menerima nilai boolean, dalam hal ini opsi ini menggantikan ekstensi tujuan dengan .css.map . Ia juga menerima jalur ke file .map dan bahkan jalur ke direktori yang diinginkan. Saat mengkompilasi direktori --source-map bisa berupa nilai boolean atau direktori.
node-sass mendukung parameter konfigurasi berbeda untuk mengubah pengaturan yang terkait dengan biner sass seperti nama biner, jalur biner, atau jalur unduhan alternatif. Parameter berikut didukung oleh node-sass:
| Nama variabel | Parameter .npmrc | Argumen proses | Nilai |
|---|---|---|---|
| SASS_BINARY_NAME | sass_binary_name | --sass-nama-biner | jalur |
| SASS_BINARY_SITE | sass_binary_site | --sass-situs biner | URL |
| SASS_BINARY_PATH | sass_binary_path | --sass-jalur biner | jalur |
| SASS_BINARY_DIR | sass_binary_dir | --sass-biner-dir | jalur |
| SASS_REJECT_UNAUTHORIZED | sass_reject_unauthorized | --sass-tolak-tidak sah | nilai |
Parameter berikut dapat digunakan sebagai variabel lingkungan:
Misalnya export SASS_BINARY_SITE=http://example.com/
Sebagai file konfigurasi .npmrc lokal atau global:
Misalnya sass_binary_site=http://example.com/
Sebagai argumen proses:
Misalnya npm install node-sass --sass-binary-site=http://example.com/
Jika Anda menggunakan sertifikat yang ditandatangani sendiri untuk biner Anda, maka SASS_REJECT_UNAUTHORIZED akan menimpa (rejectUnauthorized)[https://nodejs.org/docs/latest/api/tls.html#tls_tls_createserver_options_secureconnectionlistener].
Instalasi hanya menjalankan dua tes Mocha untuk melihat apakah mesin Anda dapat menggunakan LibSass bawaan yang akan menghemat waktu selama instalasi. Jika ada pengujian yang gagal, pengujian tersebut akan dibuat dari sumber.
Modul ini dipersembahkan dan dikelola oleh orang-orang berikut:
Michael Mifsud - Pimpinan Proyek (Github / Twitter)
Andrew Nesbitt (Github / Twitter)
Dekan Mao (Github / Twitter)
Brett Wilkins (Github/Twitter)
Keith Cirkel (Github/Twitter)
Laurent Goderre (Github / Twitter)
Nick Schonning (Github / Twitter)
Adeel Mujahid (Github / Twitter)
Kami <3 kontributor kami! Terima kasih khusus kepada semua orang yang telah meluangkan waktu pengembangan pada proyek ini, kami sangat menghargai kerja keras Anda. Anda dapat menemukan daftar lengkap orang-orang tersebut di sini.
Lihat panduan Berkontribusi kami
Hak Cipta (c) 2015 Andrew Nesbitt. Lihat LISENSI untuk detailnya.
