Bir ASP.NET ortamında Ruby HAML paketinden SASS (Sözdizimsel Olarak Harika Stil Sayfaları) kullanmanın yollarını arıyorum . İdeal olarak, SASS dosyalarının CSS'de derlenmesinin, derleme sürecinin kusursuz bir parçası olmasını isterim.
Bu entegrasyonun en iyi yolları nelerdir? Alternatif olarak, .NET ortamı için daha uygun başka CSS oluşturma araçları var mı?
Yanıtlar:
Visual Studio'da daha iyi bir çalışma deneyimi için, Sass'ı (SCSS sözdizimi) desteklemeye başlayan Web Essential'ın son sürümünü yükleyebilirsiniz .
Alternatif olarak Sassy Studio veya Web Workbench'i kurabilirsiniz .
Daha sonra ASP.NET projenizde .sass / .scss dosyalarınızı derlemek için bazı farklı araçlar vardır: Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...
Web Essential , Visual Studio için tüm Ön Uç öğeleri için gerçekten daha iyi bir deneyim sağlayan tam özellikli bir eklentidir. En son sürüm Sass'ı (SCSS sözdizimi) desteklemeye başlıyor. Dahili olarak, SCSS'yi CSS'ye derlemek için Libsass'ı kullanır.
Web Workbench , SCSS dosyalarını düzenlemek için sözdizimi vurgulama, zeka ve diğer bazı yararlı şeyler ekleyen Visual Studio için başka bir eklentidir. Ayrıca kodunuzu normal veya küçültülmüş CSS olarak derleyebilir. Dahili olarak Ruby Sass derleyicisinin sarmalanmış bir sürümünü kullandı.
Sassy Studio : Visual Studio için başka bir eklenti. Daha az özellikli ama çok daha hafif.
Libsass kütüphanesi (hala geliştirilme aşamasında) Sass CSS precompiler ait C ++ liman. Orijinal sürüm Ruby'de yazılmıştır, ancak bu sürüm verimlilik ve taşınabilirlik içindir. Bu kitaplık hafif, basit ve çeşitli platformlar ve dillerle kolayca oluşturulup entegre edilmeye çalışılır.
Libsass kitaplığının etrafında birkaç sarmalayıcı vardır:
Compass , Sass için çok sayıda yararlı yardımcı (görüntü birleştirme gibi) ekleyen ve ayrıca SCSS / Sass'ınızı derleyen bir çerçevedir. Ancak, stillerinizi derlemeniz gereken her geliştirme ortamına Ruby kurmanız gerekir.
SassAndCoffee , bazı DLL'ler ve yapılandırmalar aracılığıyla SCSS / Sass derleme ve küçültme desteği ekleyen bir pakettir. Web Workbench derleyicisine göre avantajı, Visual Studio çözümünüze kendi içinde sahip olmasıdır: her geliştirme ortamında bir eklenti kurmanıza gerek yoktur. Not: SassAndCoffee sıklıkla güncellenmez ve resmi Ruby derleyicisini paketlemek için IronRuby kullandığından, bazı performans sorunları yaşayabilirsiniz. En son sürümü bir Nuget paketi aracılığıyla yükleyebilirsiniz.
Compass projesi, sass'ınızı css'e derleyecek bir derleyiciye sahiptir. Windows üzerinde çalışacak şekilde oluşturulmuştur, ancak bu platformda iyi test edilmemiştir. Platformla ilgili herhangi bir hata bulursanız, bunları düzeltmenize memnuniyetle yardımcı olurum.
Pusula burada bulunabilir: http://github.com/chriseppsein/compass
2015'te, şu anki tavsiyem Node.js(Sunucu tarafı Javascript platformu) ve gulp.js(bir görev çalıştırıcı düğüm paketi) ile birlikte gulp-sass( libsass'ı uygulamak için bir düğüm paketi - Ruby SASS'ın hızlı bir C portu) kullanmaktır.
Bunun gibi bir öğretici ile başlayabilirsiniz .
Paketlemeyi mi tercih ediyorsunuz? Bundle Transformer artık nihayet libsass'ı kullanarak yüksek hızlı derlemeyi mümkün kılıyor.
İşte bu yüzden Node ve Gulp kullanmanız gerektiğini düşünüyorum.
package.jsonve gulpfile.jsgenellikle çalışan almak için gereken her birkaç adım:npm install -g gulp (global olarak gulp yükler)npm install (proje paketlerini yerel olarak yükler)gulp taskname (Taskname'inizi nasıl kurduğunuza bağlı olarak gulpfile.js, SASS, Javascript vb. Derleyen bir görev çalıştıracaktır)İş akışı açısından birkaç tipik seçeneğiniz var:
Geliştiricilerinizin derlenmiş kodlarını depoya işlemesini sağlayın
Dezavantaj: Geliştiriciler gulpüretime hazır varlıkları derlemek için her zaman çalıştırmalı veya benzer
Derleme | aşama | üretim sunucularınız sürümlerden önce yutkunma görevlerini çalıştırır
Bu yolun kurulumu daha karmaşık olabilir, ancak işin doğrulanması ve derlenmemiş kaynaktan taze olarak oluşturulması anlamına gelir.
Aşağıda, gelecek nesiller için sakladığım 2012'deki eski cevabım var:
Ruby, Python ve C # .NET ile çalışan Proje lideri bir ön uç geliştiriciden şu düşüncelerim var:
Sass & LESS
[Sass] [1] 'i yeni bir projede, özellikle de harika [Compass framework] [2] ile kullanmayı tercih ediyorum. Pusula harika bir iştir ve sürecime çok değer katar. Sass'ın harika bir topluluğu, OK belgeleri ve güçlü bir özellik seti var. Sass bir Ruby kütüphanesidir.
Sass'a bir alternatif, [DAHA AZ] [3] 'dür. Benzer sözdizimi ve özelliklere sahiptir, ancak daha küçük bir topluluk ve biraz daha iyi belgelere sahiptir. DAHA AZ JS kitaplığı.
Trend açısından insanlar, iyi geliştirilmiş, hatta CSS Seviye 4 özelliklerini desteklediği için zamanla Sass'a doğru hareket etme eğilimindedir. Ancak LESS hala mükemmel bir şekilde kullanılabilir ve onu kullanmayı garanti etmek için kolayca yeterli değer katar.
Bir ASP.NET Projesinde Sass / LESS kullanma hakkında
Sass kullanmayı tercih etsem de, Ruby / Sass'ın .NET projeleriyle çalışmasını sağlamak acı verici olabilir çünkü kurulumu zor, yabancı ve geliştiricileri hayal kırıklığına uğratabilir.
Birkaç seçeneğiniz var:
- Sass: Yerli Yakut + Sass
- Pro: En hızlı sunucu derlemesi
- Pro: Sass'ın en son sürümlerini kullanabilir
- Con: Başlamak ve çalıştırmak için büyük güçlük
- Eksileri: Her sunucu veya iş istasyonu Ruby'nin kurulmasına ihtiyaç duyar
- Eksileri: .NET geliştiricilerinin Ruby / entegrasyon sorunlarını çözmesi daha zor
- Sass: [IronRuby] [5] + Sass gibi Ruby .NET bağlantı noktası
- Pro: SLOW sunucu derlemesi (Frontend Devs şikayet edecek!)
- Pro: Sass'ın son sürümlerini kullanamayabilir
- Profesyonel: Yerleşik Ruby'den biraz daha kolay kurulum
- Eksileri: Her sunucu veya iş istasyonu Ruby'nin kurulmasına ihtiyaç duyar
- Eksileri: .NET geliştiricilerinin Ruby / entegrasyon sorunlarını çözmesi daha zor
- Sass: [.NET Bundling] [8] 'i [BundleTransformer] [7] + Sass ile genişletin
- Profesyonel: (IronRuby kullanır) YAVAŞ sunucu derlemesi (Frontend Devs şikayet edecek!)
- Pro: (IronRuby kullanır) Sass'ın son sürümlerini kullanamayabilir
- Profesyonel: (IronRuby kullanır) Yerleşik Ruby'den biraz daha kolay kurulum
- Eksileri: Her sunucu veya iş istasyonu Ruby'nin kurulmasına ihtiyaç duyar
- Eksileri: .NET geliştiricilerinin Ruby / entegrasyon sorunlarını çözmesi daha zor
- Sass veya LESS: [Mindscape Workbench] [4] gibi Visual Studio eklentisi
- Pro: Başlaması kolay
- Pro: Hızlı derleme
- Eksileri: Sass stilleri ile çalışan her geliştiricinin bir IDE eklentisine ihtiyacı vardır
- Dezavantaj: Sunucudaki stilleri hızlı bir şekilde değiştiremiyorum - yerel yeniden işleme gerektirir
- DAHA AZ: [DotLessCSS] [6] gibi .NET bağlantı noktası
- Pro: Hızlı sunucu derlemesi
- Pro: Kurulumu çok kolay
- Pro: C # .NET geliştiricileri için rahat
- Pro: IDE / iş istasyonu / sunucu gereksinimi yok - bunu web uygulamasının kendisine ekleyin
- Eksileri: SASS / Compass'ın çok yönlülüğüne sahip değil ve her zaman en son LESS.JS sözdizimi uyumluluğunu garanti edemiyor
- Sass: Linux + Ruby'yi [Vagrant] [9] ile sanallaştırın
- Pro: Kurulum düşündüğünüz kadar korkunç değil
- Pro: Hızlı !!
- Pro: Linux paket yöneticisi ile güncellenen en yeni Ön Uç araçları (Sass, Compass vb.)
- Con: İlk Kurulum, Linux kullanıcısı olmayanlar için zor olabilir
- Eksileri: Ortam gereksinimleri artık bir sanal makineyi barındırmayı içeriyor
- Eksileri: Sanal makinenin ölçeklenebilirlik / bakım sorunları olabilir
Bana göre, [DotLessCSS] [6] 'yı kullanmak, yukarıda belirtilen nedenlerden ötürü tipik web geliştirme projeniz için en iyi seçimdir.
Birkaç yıl önce, [DotLessCSS] 'nin [6] can sıkıcı hatalar ve sınırlamalara sahip olduğunu buldum, ancak 2012'de birkaç projede [DotLessCSS] [6]' yı tekrar kullanarak kurulumdan çok memnunum. Geliştiricilerime Sass / Ruby kullanarak acı vermedim ve değerin çoğunu LESS'ten elde ettim. Hepsinden iyisi, IDE veya iş istasyonu gereksinimi olmaması.
[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/
Sass'ın Visual Studio için nasıl kullanılacağına dair ekran görüntülerini içeren ayrıntılı talimatlar içeren bir Visual Studio Eklentisi yazdım. Buradan kontrol edin - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/
Bunu daha dün buldum, oldukça umut verici görünüyor, sass / scss dışında JS'nin otomatikleştirilmesini (henüz CSS değil) ve dosyaların birleştirilmesini sağlayacak. Sass / scss dosyalarını düzenlemek için bir VS eklentisi oluşturmasını umduğum bir şey var. Benim sorunlu bulduğum şey, sass / scss kodunuzda bir hata olduğunda, onu yalnızca oluşturulan CSS dosyalarını test ederken veya incelerken bulmanızdı. Tüm adımlarını atmadım ama şimdiye kadar çok iyi.
Başlangıçta bu soruyu burada cevapladım .
#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