Apakah ada SASS.js? Sesuatu seperti LESS.js?

112

Saya telah menggunakan LESS.js sebelumnya. Mudah digunakan, seperti

<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>

Saya melihat SASS.js . Bagaimana saya bisa menggunakannya dengan cara yang serupa? Parsing file SASS untuk segera digunakan dalam HTML. Sepertinya SASS.js lebih untuk digunakan dengan Node.js ?

var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'

sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}
css sass less Jiew Meng
sumber
6
Untuk produksi itu adalah akar kejahatan, untuk pengembangan yang Anda miliki sass watch.
Hauleth
3
Saya suka ide tersebut karena masalah dengan "jam tangan sass" adalah Anda terkadang menguji halaman secara tidak sengaja sebelum "jam tangan sass" mulai berjalan. Dengan less.js Anda bisa memuat halaman dan pastikan bahwa css telah dikompilasi saat Anda melihat halaman tersebut. Tentu saja hanya di lingkungan pengembang.
Maya Kathrine Andersen
Lihat SassMeister: sassmeister.com - kompiler SASS online gratis
Dan
1
Memang ada, sass.js
LukyVj
Jam tangan sass @Hauleth (seperti jam tangan yang lebih sedikit) terkadang bukan pilihan. Khususnya ketika file sumber Anda ditangani oleh build / dependency pihak ketiga dan Anda hanya dapat memiliki file sumber lengkap saat Anda mengemas atau menerapkan aplikasi web Anda dan menerapkannya dengan lambat. (Yaitu ... aplikasi web java)
Zardoz89

Jawaban:

42

Tidak ada implementasi JavaScript dari sass atau scss yang disetujui secara resmi. Ada beberapa implementasi yang sedang berlangsung yang pernah saya lihat, tetapi tidak ada yang dapat saya rekomendasikan untuk digunakan saat ini.

Namun, harap beberapa poin:

  1. Mengapa Anda harus membuat semua pengguna Anda mengompilasi stylesheet Anda padahal Anda dapat melakukannya sekali untuk semuanya.
  2. Seperti apa situs Anda jika JavaScript dinonaktifkan.
  3. Jika Anda memutuskan untuk mengubah ke implementasi sisi server di masa mendatang, semua template Anda harus diubah sebagaimana mestinya.

Jadi meskipun sedikit lebih banyak penyiapan untuk memulai, kami (tim inti sass) berpikir bahwa kompilasi sisi server adalah pendekatan jangka panjang terbaik. Demikian pula, semakin sedikit pengembang yang lebih memilih kompilasi sisi server untuk stylesheet produksi.

chriseppstein.dll
sumber
157
kasus penggunaan saya: mengembangkan template html + css yang akan dimasukkan ke dalam proyek rel. alangkah baiknya memiliki sass.js untuk tujuan pengembangan localhost sehingga saya tidak perlu mengutak-atik server.
Josef Richter
93
Ada banyak kasus di mana kompilasi sisi klien berguna. Misalnya, jika Anda ingin membiarkan pengguna bermain dengan tampilan halaman mereka dan hanya menyimpan hasil yang mereka pilih kembali ke server.
montrealmike
26
Saya 100% setuju dengan chriseppstein (mengapa Anda ingin pengguna mengkompilasi stylesheet), tidak tercakup di sini, polos dan sederhana: pengembangan. Semua kode js yang saya terapkan, saya ingin diperkecil dan dikompresi, seperti pada css saya. Namun selama pengembangan, akan membantu untuk memiliki akses ke kode daripada versi "dikompilasi". Saya tidak yakin saya berbicara untuk semua insinyur front-end, tetapi saya dapat mengatakan bahwa banyak dari kita yang menggunakan browser dan editor sebagai satu-satunya alat yang diperlukan selama fase pengembangan. Saya tidak ingin harus "mengkompilasi" sass / scss selama pengembangan. Deployment / CI / Produksi adalah masalah yang berbeda
Graza
15
Untuk melemparkan sesuatu ke sisi penulis; Saya ingin mempertimbangkan untuk menggunakan SASS tetapi saya tidak menggunakan dan juga tidak ingin menggunakan Ruby; karena itu, solusi sisi klien lebih disukai daripada tidak ada. Menulisnya di Ruby membatasi penggunaannya hanya untuk pengguna ruby; jika itu ditulis dalam JS, itu bisa digunakan pada klien atau server (dengan node, classic asp, asp.net dan mungkin lainnya).
Dan
27
implementasi JavaScript juga dapat digunakan di sisi server dengan node / rhino dll. tanpa harus memiliki ketergantungan pada ruby
Sam Hasler
29

Sejak visionmeda / sass.js tidak tersedia lagi dan SCSS-js belum diperbarui dalam 2 tahun, saya mungkin menarik bagi Anda di sass.js . Ini adalah pustaka C ++ libsass (juga digunakan oleh node-sass ) yang dikompilasi ke JavaScript menggunakan Emscripten. Implementasi untuk stylesheet SCSS kompilasi terkait atau inline di html dapat ditemukan di sass.link.js .

Cobalah sass.js menggunakan taman bermain interaktif

rodneyrehm.dll
sumber
3
Sekarang kita hanya membutuhkan kompiler C ++ ke Ruby dan kita bisa menyatukan basis kode.
joeytwiddle
1
sass.js tampaknya sangat besar dalam ukuran 670KB (gzip) dibandingkan dengan ukuran 143kb less.js (gzip). juga saya tidak melihat opsi apa pun di sass.js untuk secara dinamis mengatur variabel css dibandingkan dengan less.js. ini sangat berguna bila Anda memiliki situs yang dapat diubah
Anirudha
7

IYA

Seperti yang kami harapkan, setelah menulis ulang pada C ++ , dimungkinkan untuk mengkompilasinya dalam Javascript melalui Emscripten .

Ini adalah versi browser: https://github.com/medialize/sass.js/

Seperti yang mereka rekomendasikan, untuk node Anda dapat menggunakan yang ini: https://github.com/sass/node-sass

nikoloza.dll
sumber
2
Kombinasi ini dan jawaban (yang diterima saat ini) harus menjadi jawaban yang diterima sebenarnya.
plaidcorp
5

Anda tentunya tidak boleh membuat semua pengguna Anda mengompilasi stylesheet, namun implementasi javascript juga dapat berjalan di server. Saya juga mencari implementasi javascript sass - untuk digunakan dalam aplikasi node.js. Apakah ini sesuatu yang sedang dipertimbangkan oleh tim sass?

tilleryj
sumber
3
Saya tidak ingin menggunakan SASS.js untuk produksi! Saya ingin dapat menggunakan mesin pengembangan tanpa perlu menginstal ruby ​​hanya untuk SASS. Setelah pengembangan selesai, saya dapat memproses SASS di mesin mana pun dan memindahkan hasil CSS ke server produksi.
A. Matías Quezada
1
Saya sarankan Anda melihat menggunakan Stylus daripada sass pada proyek Node.
airtonix
3

Ada percobaan di GitHub , scss-js . Namun, ini tidak lengkap dan tidak memiliki komitmen apa pun dalam lima bulan.

Peter Lyons
sumber
1
Ini terlihat seperti modul node js? Pertanyaan asli adalah tentang implementasi sisi klien, bukan?
jayarjo
1

Mengapa LibSass

Meskipun tidak ada implementasi JavaScript dari sass yang disetujui secara resmi, ada port C / C ++ resmi dari mesin Sass, yang dikenal sebagai LibSass . Karena LibSass adalah implementasi resmi, yang terbaik adalah memilih pustaka JavaScript yang menggunakan LibSass.

Di server

Untuk JavaScript yang berjalan di lingkungan Node.js, ada Node-sass .

Di bawah kap, Node-sass menggunakan LibSass itu sendiri.

Di browser

Untuk JavaScript berjalan di browser, ada Sass.js .

Di bawah tenda, Sass.js menggunakan versi LibSass (v3.3.6 pada saat saya menulis ini) yang telah diubah ke JavaScript dengan Emscripten .

John Slegers
sumber