Menggunakan SASS dengan ASP.NET [ditutup]

Saya sedang mencari cara untuk menggunakan SASS (Syntactically Awesome StyleSheets) dari paket Ruby HAML di lingkungan ASP.NET. Idealnya, saya ingin kompilasi file SASS menjadi CSS menjadi bagian yang mulus dari proses pembuatan.

Apa cara terbaik untuk integrasi ini? Atau, apakah ada alat pembuat CSS lain yang lebih cocok untuk lingkungan .NET?

Untuk pengalaman kerja yang lebih baik dalam Visual Studio, Anda dapat menginstal versi terakhir Web Essential yang mulai mendukung Sass (sintaks SCSS).
Atau Anda dapat menginstal Sassy Studio atau Web Workbench .

Kemudian untuk mengompilasi file .sass / .scss Anda di proyek ASP.NET, ada beberapa alat yang berbeda: melalui Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential plugin berfitur lengkap untuk Visual Studio, yang benar-benar memberikan pengalaman yang lebih baik untuk semua barang Front-End. Versi terbaru mulai mendukung Sass (sintaks SCSS). Secara internal menggunakan Libsass untuk mengkompilasi SCSS ke CSS.

Web Workbench adalah plugin lain untuk Visual Studio yang menambahkan penyorotan sintaks, intellisence, dan beberapa hal berguna lainnya untuk mengedit file SCSS. Itu juga dapat mengkompilasi kode Anda menjadi CSS normal atau yang diperkecil. Secara internal digunakan versi terbungkus dari kompiler Ruby Sass.

Sassy Studio : plugin lain untuk Visual Studio. Lebih sedikit fitur tetapi jauh lebih ringan.

The Libsass perpustakaan adalah C ++ port dari Sass CSS precompiler (masih dalam pengembangan). Versi aslinya ditulis dengan Ruby, tetapi versi ini dimaksudkan untuk efisiensi dan portabilitas. Perpustakaan ini berusaha untuk menjadi ringan, sederhana, dan mudah dibangun dan diintegrasikan dengan berbagai platform dan bahasa.

Ada beberapa pembungkus di sekitar perpustakaan Libsass:

• SassC : kompiler baris perintah (pada Windows Anda perlu mengkompilasi sumber SassC dengan MsysGit untuk mendapatkan sassc.exe).
• NSass : a. Pembungkus bersih .
• Node-Sass : untuk menggunakan Libsass di Node.js.
• dll.

Kompas adalah kerangka kerja untuk Sass yang menambahkan banyak pembantu yang berguna (seperti spriting gambar) dan juga dapat mengkompilasi SCSS / Sass Anda. Tetapi Anda perlu menginstal Ruby di setiap lingkungan pengembangan tempat Anda perlu mengompilasi gaya Anda.

SassAndCoffee adalah paket yang menambahkan kompilasi SCSS / Sass dan dukungan minifikasi, melalui beberapa DLL dan konfigurasi. Keuntungannya dibandingkan kompiler Web Workbench adalah itu mandiri ke dalam solusi Visual Studio Anda: Anda tidak perlu menginstal plugin di setiap lingkungan pengembangan. Catatan: SassAndCoffee tidak sering diperbarui, dan karena ia menggunakan IronRuby untuk membungkus kompiler Ruby resmi, Anda bisa mendapatkan beberapa masalah kinerja. Anda dapat menginstal versi terbaru melalui paket Nuget .

Proyek kompas memiliki kompiler yang akan mengkompilasi sass Anda ke css. Itu dibangun untuk berjalan di windows, tetapi tidak diuji dengan baik pada platform itu. Jika Anda menemukan bug terkait platform, saya akan dengan senang hati membantu Anda memperbaikinya.

Kompas dapat ditemukan di sini: http://github.com/chriseppsein/compass

Pada 2015, saran saya saat ini adalah menggunakan Node.js(platform Javascript sisi server) dan gulp.js(paket node runner tugas), bersama dengan gulp-sass(paket node untuk gulp yang mengimplementasikan libsass - port C cepat dari Ruby SASS).

Anda bisa memulai dengan tutorial seperti ini .

Lebih suka Bundling? Bundle Transformer sekarang akhirnya menggunakan libsass, memungkinkan kompilasi berkecepatan tinggi.

Inilah mengapa saya pikir Anda harus menggunakan Node dan Gulp.

• Node sekarang populer untuk Frontend Tooling
  Banyak pengembang web sekarang menggunakan Node sebuah platform untuk tugas pengembangan web frontend. Baik itu Grunt, Gulp, JSPM, Webpack, atau yang lainnya - sedang terjadi sekarang di npm .
  Hal-hal yang dapat Anda lakukan dengan paket npm:
  • Kompilasi gaya dengan Sass, Less, PostCSS dan banyak lagi
  • Menggabungkan Javascript, CSS, template HTML, dan lainnya
  • Tulis versi lain dari JS dan transpile ES6-7, Typecript, Coffeescript ke ES5
  • Buat font ikon dari file SVG lokal
  • Perkecil js, css, SVG
  • Optimalkan gambar
  • Selamatkan Paus
  • ...
• Penyiapan yang lebih sederhana bagi pengembang baru untuk suatu proyek
  Setelah Anda menyiapkan proyek Anda package.jsondan gulpfile.js, yang biasanya diperlukan untuk menjalankannya hanyalah beberapa langkah:
  
  • Unduh dan pasang Node.js
  • Jalankan npm install -g gulp (instal gulp secara global)
  • Jalankan npm install (instal paket proyek secara lokal)
  • Jalankan gulp taskname (Tergantung pada bagaimana Anda mengatur gulpfile.jsnama tugas Anda akan menjalankan tugas yang mengkompilasi SASS Anda, Javascript dll)
• Didukung oleh Visual Studio 2015
  Percaya atau tidak, VS2015 sekarang dapat menangani semua perintah baris untuk Anda!

Anda memiliki beberapa opsi tipikal dalam hal alur kerja:

• Minta pengembang Anda memasukkan kode yang telah dikompilasi ke repositori.
  Kelemahan: Pengembang harus selalu menjalankan gulpatau serupa untuk mengompilasi aset siap produksi

• Server build | stage | produksi Anda menjalankan tugas gulp sebelum rilis.
  Cara ini bisa lebih rumit untuk disiapkan, tetapi berarti bahwa pekerjaan divalidasi dan dibuat baru dari sumber yang tidak dikompilasi.

Di bawah ini adalah jawaban lama saya dari tahun 2012, disimpan untuk anak cucu:

Dari pengembang frontend terkemuka Proyek yang bekerja dengan Ruby, Python, dan C # .NET, saya memiliki pemikiran ini:

Sass & LESS

Saya lebih suka menggunakan [Sass] [1] pada proyek baru, terutama dengan [Compass framework] [2]. Kompas adalah karya yang hebat, dan menambah banyak nilai pada proses saya. Sass memiliki komunitas yang hebat, dokumentasi yang baik, dan serangkaian fitur yang hebat. Sass adalah perpustakaan Ruby.

Alternatif untuk Sass, adalah [KURANG] [3]. Ini memiliki sintaks dan fitur yang serupa, tetapi komunitas yang lebih kecil dan dokumentasi yang sedikit lebih baik. KURANG perpustakaan JS.

Dari segi tren, orang cenderung beralih ke Sass dari waktu ke waktu karena Sass berkembang dengan baik, bahkan mendukung fitur CSS Level 4. Tetapi LESS masih dapat digunakan dengan sempurna, dan dengan mudah menambahkan nilai yang cukup untuk menjamin penggunaannya.

Tentang menggunakan Sass / LESS dalam Proyek ASP.NET

Meskipun saya lebih suka menggunakan Sass, mendapatkan Ruby / Sass untuk bekerja dengan proyek .NET bisa menyakitkan, karena sulit untuk disiapkan, asing, dan dapat membuat pengembang frustasi.

Anda punya beberapa pilihan:

• Sass: Ruby Asli + Sass
  • Pro: Kompilasi server tercepat
  • Pro: Mampu menggunakan Sass versi terbaru
  • Kontra: Kerepotan besar untuk bangun dan berlari
  • Kontra: Setiap server atau workstation membutuhkan pengaturan ruby
  • Kontra: Lebih sulit bagi pengembang .NET untuk memecahkan masalah Ruby / integrasi
• Sass: Ruby .NET port seperti [IronRuby] [5] + Sass
  • Pro: Kompilasi server LAMBAT (Pengembang Frontend akan mengeluh!)
  • Pro: Mungkin tidak dapat menggunakan versi terbaru Sass
  • Pro: Sedikit lebih mudah untuk diatur daripada Native Ruby
  • Kontra: Setiap server atau workstation membutuhkan pengaturan ruby
  • Kontra: Lebih sulit bagi pengembang .NET untuk memecahkan masalah Ruby / integrasi
• Sass: Perpanjang [.NET Bundling] [8] dengan [BundleTransformer] [7] + Sass
  • Pro: (Menggunakan IronRuby) Kompilasi server LAMBAT (Pengembang Frontend akan mengeluh!)
  • Pro: (Menggunakan IronRuby) Mungkin tidak dapat menggunakan versi terbaru Sass
  • Pro: (Menggunakan IronRuby) Sedikit lebih mudah diatur daripada Ruby Asli
  • Kontra: Setiap server atau workstation membutuhkan pengaturan ruby
  • Kontra: Lebih sulit bagi pengembang .NET untuk memecahkan masalah Ruby / integrasi
• Sass atau LESS: Plugin Visual Studio seperti [Mindscape Workbench] [4]
  • Pro: Mudah untuk memulai
  • Pro: Kompilasi cepat
  • Kontra: Setiap pengembang yang bekerja dengan gaya Sass membutuhkan plugin IDE
  • Kontra: Tidak dapat dengan cepat mengubah gaya di server - memerlukan pemrosesan ulang lokal
• KURANG: Port .NET seperti [DotLessCSS] [6]
  • Pro: Kompilasi server cepat
  • Pro: Sangat mudah diatur
  • Pro: Nyaman untuk pengembang C # .NET
  • Pro: Tidak ada persyaratan IDE / workstation / server - sertakan di aplikasi web itu sendiri
  • Kontra: Tidak memiliki keserbagunaan SASS / Compass, dan tidak selalu dapat menjamin kompatibilitas sintaks LESS.JS terbaru
• Sass: Virtualisasi linux + Ruby dengan [Gelandangan] [9]
  • Pro: Tidak seburuk yang Anda bayangkan
  • Pro: Cepat !!
  • Pro: Alat Frontend terbaru (Sass, Kompas dll), diperbarui dengan manajer paket linux
  • Kontra: Setup Awal mungkin sulit untuk pengguna non-linux
  • Kontra: Persyaratan lingkungan sekarang melibatkan hosting VM
  • Kontra: VM mungkin memiliki masalah skalabilitas / pemeliharaan

Menurut pendapat saya, KURANG menggunakan [DotLessCSS] [6] adalah pilihan terbaik untuk proyek pengembangan web biasa Anda, untuk alasan yang disebutkan di atas.

Beberapa tahun yang lalu, saya menemukan [DotLessCSS] [6] memiliki bug dan batasan yang mengganggu, tetapi menggunakan [DotLessCSS] [6] lagi pada tahun 2012 pada beberapa proyek, saya sangat senang dengan penyiapannya. Saya belum memperkenalkan rasa sakit kepada pengembang saya dengan menggunakan Sass / Ruby dan mendapatkan sebagian besar nilai dari LESS. Yang terbaik dari semuanya, tidak ada persyaratan IDE atau workstation.

[1]: http://sass-lang.com/ [2]: http://compass-style.org/ [3]: http://lesscss.org/ [4]: http: // www. mindscapehq.com/products/web-workbench [5]: http://www.ironruby.net/ [6]: http://www.dotlesscss.org/ [7]: http://bundletransformer.codeplex.com / [8]: http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx [9]: http://www.vagrantup.com/

Saya baru saja menulis Add-in Visual Studio dengan instruksi terperinci termasuk tangkapan layar tentang cara membuat Sass berjalan untuk Visual Studio. Lihat di sini - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Ini bukan SASS tetapi Anda dapat melihat di Less Css for .NET port kami. Kompas terlihat sangat menarik, dan saya pikir sesuatu seperti ini untuk Less akan menjadi tambahan yang bagus.

Saya baru menemukannya kemarin, tampilannya cukup menjanjikan, selain sass / scss ini akan menangani autominifikasi JS (bukan CSS - belum) dan penggabungan file. Satu hal yang saya harapkan adalah seseorang di luar sana untuk membuat plugin VS untuk mengedit file sass / scss. Apa yang saya temukan bermasalah adalah ketika Anda memiliki kesalahan dalam kode sass / scss Anda, Anda hanya menemukannya sedang melakukan pengujian atau pemeriksaan file CSS yang dihasilkan. Saya belum menyelesaikan semua langkahnya, tapi sejauh ini bagus.

https://github.com/xpaulbettsx/SassAndCoffee

Saya awalnya menjawab pertanyaan ini di sini .

#PostBuild.rb
#from http://sentia.com.au/2008/08/sassing-a-net-application.html
#Post-build event command line: rake -f "$(ProjectDir)PostBuild.rb"

require 'haml'
require 'sass'

task :default => [ :stylesheets ]

desc 'Regenerates all sass templates.'
task :stylesheets do
    wd = File.dirname(__FILE__)
    sass_root = File.join(wd, 'Stylesheets')
    css_root = File.join(wd, 'Content')
    Dir[sass_root + '/*.sass'].each do |sass|
        css = File.join(css_root, File.basename(sass, '.sass') + '.css')
        puts "Sassing #{sass} to #{css}."
        File.open(css, 'w') do |f|
            f.write(Sass::Engine.new(IO.read(sass)).render)
        end
    end
end