ฉันกำลังมองหาวิธีใช้SASS (Syntactically Awesome StyleSheets) จากแพ็คเกจ Ruby HAML ในสภาพแวดล้อม ASP.NET ตามหลักการแล้วฉันต้องการรวบรวมไฟล์ SASS ลงใน CSS เพื่อเป็นส่วนหนึ่งของกระบวนการสร้างที่ราบรื่น
วิธีใดที่ดีที่สุดในการผสานรวมนี้ หรือมีเครื่องมือสร้าง CSS อื่น ๆ ที่เหมาะกับสภาพแวดล้อม. NET หรือไม่?
คำตอบ:
เพื่อประสบการณ์การทำงานที่ดีขึ้นใน Visual Studio คุณสามารถติดตั้งWeb Essentialเวอร์ชันล่าสุดซึ่งเริ่มรองรับ Sass (ไวยากรณ์ SCSS)
หรือคุณสามารถติดตั้งSassy สตูดิโอหรือเว็บ Workbench
จากนั้นในการคอมไพล์ไฟล์ .ass / .scss ในโปรเจ็กต์ ASP.NET ของคุณมีเครื่องมือที่แตกต่างกัน: ผ่านWeb Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...
Web Essentialเป็นปลั๊กอินที่มีคุณสมบัติครบถ้วนสำหรับ Visual Studio ซึ่งให้ประสบการณ์ที่ดีกว่าสำหรับเนื้อหา Front-End ทั้งหมด เวอร์ชันล่าสุดเริ่มรองรับ Sass (ไวยากรณ์ SCSS) ภายในจะใช้ Libsass เพื่อรวบรวม SCSS เป็น CSS
Web Workbenchเป็นปลั๊กอินสำหรับ Visual Studio ที่เพิ่มการเน้นไวยากรณ์ intellisence และสิ่งที่มีประโยชน์อื่น ๆ สำหรับการแก้ไขไฟล์ SCSS นอกจากนี้ยังสามารถรวบรวมโค้ดของคุณเป็น CSS ปกติหรือย่อขนาดได้ ภายในใช้คอมไพเลอร์ Ruby Sass เวอร์ชันที่ห่อหุ้มไว้
Sassy Studio : ปลั๊กอินอื่นสำหรับ Visual Studio จุดเด่นน้อยกว่า แต่เบากว่ามาก
ห้องสมุด Libsassเป็นพอร์ต C ++ ของ CSS precompiler Sass (ยังคงอยู่ในระหว่างการพัฒนา) เวอร์ชันดั้งเดิมเขียนด้วย Ruby แต่เวอร์ชันนี้มีขึ้นเพื่อประสิทธิภาพและความสะดวกในการพกพา ห้องสมุดนี้มุ่งมั่นที่จะมีน้ำหนักเบาเรียบง่ายและง่ายต่อการสร้างและรวมเข้ากับแพลตฟอร์มและภาษาที่หลากหลาย
มีเครื่องห่อหลายตัวรอบไลบรารี Libsass:
เข็มทิศเป็นเฟรมเวิร์กสำหรับ Sass ที่เพิ่มตัวช่วยที่มีประโยชน์มากมาย (เช่นการจัดเรียงรูปภาพ) และยังสามารถรวบรวม SCSS / Sass ของคุณ แต่คุณต้องติดตั้ง Ruby ในแต่ละสภาพแวดล้อมการพัฒนาที่คุณต้องรวบรวมสไตล์ของคุณ
SassAndCoffeeเป็นแพ็คเกจที่เพิ่มการคอมไพล์ SCSS / Sass และการสนับสนุนการย่อขนาดผ่าน DLL และการกำหนดค่าบางอย่าง ข้อได้เปรียบของคอมไพเลอร์ Web Workbench คือมีอยู่ในโซลูชัน Visual Studio ของคุณ: คุณไม่จำเป็นต้องติดตั้งปลั๊กอินในทุกสภาพแวดล้อมการพัฒนา หมายเหตุ: SassAndCoffee ไม่ได้รับการอัปเดตบ่อยนักและเนื่องจากใช้ IronRuby ในการรวมคอมไพเลอร์ Ruby อย่างเป็นทางการคุณอาจพบปัญหาด้านประสิทธิภาพ คุณสามารถติดตั้งรุ่นล่าสุดผ่านแพคเกจ Nuget
โครงการเข็มทิศมีคอมไพเลอร์ที่จะรวบรวม sass ของคุณเป็น css สร้างขึ้นเพื่อให้ทำงานบน windows แต่ยังไม่ได้รับการทดสอบอย่างดีบนแพลตฟอร์มนั้น หากคุณพบข้อบกพร่องที่เกี่ยวข้องกับแพลตฟอร์มเรายินดีช่วยคุณแก้ไข
เข็มทิศสามารถพบได้ที่นี่: http://github.com/chriseppsein/compass
ในปี 2015 คำแนะนำปัจจุบันของฉันคือใช้Node.js(แพลตฟอร์ม Javascript ฝั่งเซิร์ฟเวอร์) และgulp.js(แพ็คเกจโหนดรันเนอร์งาน) พร้อมกับgulp-sass(แพ็คเกจโหนดสำหรับการใช้libsassอึก- พอร์ต C ที่รวดเร็วของ Ruby SASS)
คุณสามารถเริ่มต้นกับการกวดวิชาเช่นนี้
ต้องการ Bundling หรือไม่? ในที่สุดBundle Transformerก็ใช้ libsass ทำให้สามารถคอมไพล์ความเร็วสูงได้
นี่คือเหตุผลที่ฉันคิดว่าคุณควรใช้ Node and Gulp
package.jsonและgulpfile.jsโดยปกติแล้วสิ่งที่ต้องทำก็คือไม่กี่ขั้นตอน:npm install -g gulp (ติดตั้งอึกทั่วโลก)npm install (ติดตั้งแพ็คเกจโครงการในเครื่อง)gulp taskname (ขึ้นอยู่กับว่าคุณตั้งค่าgulpfile.jsชื่องานของคุณอย่างไรจะรันงานที่รวบรวม SASS, Javascript และอื่น ๆ ของคุณ)คุณมีสองตัวเลือกทั่วไปในแง่ของขั้นตอนการทำงาน:
ให้นักพัฒนาของคุณส่งโค้ดที่คอมไพล์ไปยังที่เก็บ
ข้อเสีย: นักพัฒนาต้องรันgulpหรือคล้ายกับการคอมไพล์สินทรัพย์ที่พร้อมใช้งานจริงเสมอ
บิลด์ | สเตจ | เซิร์ฟเวอร์ที่ใช้งานจริงจะรันงานอึกก่อนเผยแพร่
วิธีนี้อาจซับซ้อนกว่าในการตั้งค่า แต่หมายความว่างานนั้นได้รับการตรวจสอบความถูกต้องและสร้างขึ้นใหม่จากแหล่งที่ไม่ได้คอมไพล์
ด้านล่างนี้เป็นคำตอบเก่าของฉันจากปี 2012 เก็บไว้สำหรับลูกหลาน:
จากผู้พัฒนาส่วนหน้าของโครงการที่ทำงานกับ Ruby, Python และ C # .NET ฉันมีความคิดเหล่านี้:
Sass & น้อย
ฉันชอบใช้ [Sass] [1] ในโปรเจ็กต์ใหม่โดยเฉพาะกับ [Compass framework] [2] ที่ยอดเยี่ยม เข็มทิศเป็นผลงานที่ยอดเยี่ยมและเพิ่มมูลค่าให้กับกระบวนการของฉันมาก Sass มีชุมชนที่ยอดเยี่ยมเอกสารตกลงและชุดคุณลักษณะที่มีประสิทธิภาพ Sass เป็นห้องสมุด Ruby
อีกทางเลือกหนึ่งของ Sass คือ [LESS] [3] มีไวยากรณ์และคุณสมบัติคล้ายกัน แต่เป็นชุมชนที่เล็กกว่าและมีเอกสารประกอบที่ดีกว่าเล็กน้อย น้อยกว่าห้องสมุด JS
เทรนด์ที่ชาญฉลาดผู้คนมักจะมุ่งไปที่ Sass เมื่อเวลาผ่านไปเนื่องจากได้รับการพัฒนามาเป็นอย่างดีแม้จะรองรับฟีเจอร์ CSS ระดับ 4 แต่ LESS ยังคงใช้งานได้อย่างสมบูรณ์แบบและเพิ่มมูลค่าให้เพียงพอที่จะรับประกันการใช้งานได้อย่างง่ายดาย
เกี่ยวกับการใช้ Sass / LESS ในโครงการ ASP.NET
แม้ว่าฉันจะชอบใช้ Sass แต่การทำให้ Ruby / Sass ทำงานกับโปรเจ็กต์. NET อาจเป็นเรื่องที่เจ็บปวดเพราะการตั้งค่ามันยากต่างประเทศและอาจทำให้นักพัฒนาหงุดหงิดได้
คุณมีทางเลือกไม่กี่ทาง:
- Sass: ทับทิมพื้นเมือง + Sass
- Pro: การรวบรวมเซิร์ฟเวอร์ที่เร็วที่สุด
- Pro:สามารถใช้ Sass เวอร์ชันล่าสุดได้
- Con:ความยุ่งยากมากมายในการเริ่มต้นใช้งาน
- Con:เซิร์ฟเวอร์หรือเวิร์กสเตชันทุกแห่งต้องการการตั้งค่าทับทิม
- Con:ยากกว่าสำหรับนักพัฒนา. NET ในการแก้ปัญหา Ruby / การรวม
- Sass: พอร์ต Ruby .NET เช่น [IronRuby] [5] + Sass
- Pro: การรวบรวมเซิร์ฟเวอร์ช้า (Frontend Devs จะบ่น!)
- Pro:อาจไม่สามารถใช้ Sass เวอร์ชันล่าสุดได้
- Pro:ติดตั้งง่ายกว่า Native Ruby เล็กน้อย
- Con:เซิร์ฟเวอร์หรือเวิร์กสเตชันทุกแห่งต้องการการตั้งค่าทับทิม
- Con:ยากกว่าสำหรับนักพัฒนา. NET ในการแก้ปัญหา Ruby / การรวม
- Sass: ขยาย [.NET Bundling] [8] ด้วย [BundleTransformer] [7] + Sass
- Pro: (ใช้ IronRuby) การรวบรวมเซิร์ฟเวอร์ช้า (Frontend Devs จะบ่น!)
- Pro: (ใช้ IronRuby) อาจไม่สามารถใช้ Sass เวอร์ชันล่าสุดได้
- Pro: (ใช้ IronRuby) ติดตั้งง่ายกว่า Native Ruby เล็กน้อย
- Con:เซิร์ฟเวอร์หรือเวิร์กสเตชันทุกแห่งต้องการการตั้งค่าทับทิม
- Con:ยากกว่าสำหรับนักพัฒนา. NET ในการแก้ปัญหา Ruby / การรวม
- Sass หรือ LESS: ปลั๊กอิน Visual Studio เช่น [Mindscape Workbench] [4]
- Pro:เริ่มต้นได้ง่าย
- Pro:รวบรวมข้อมูลอย่างรวดเร็ว
- Con:นักพัฒนาทุกคนที่ทำงานกับสไตล์ Sass ต้องการปลั๊กอิน IDE
- Con:ไม่สามารถเปลี่ยนรูปแบบบนเซิร์ฟเวอร์ได้อย่างรวดเร็ว - ต้องมีการประมวลผลใหม่ภายในเครื่อง
- น้อย: พอร์ต. NET เช่น [DotLessCSS] [6]
- Pro: การรวบรวมเซิร์ฟเวอร์ที่รวดเร็ว
- Pro:ติดตั้งง่ายมาก
- Pro:สะดวกสบายในการพัฒนา C # .NET
- Pro:ไม่มีข้อกำหนด IDE / เวิร์กสเตชัน / เซิร์ฟเวอร์ - รวมไว้ในเว็บแอป
- Con:ไม่มีความสามารถรอบด้านของ SASS / Compass และไม่สามารถรับประกันความเข้ากันได้ของไวยากรณ์ LESS.JS ล่าสุดได้เสมอไป
- Sass: Virtualise linux + Ruby กับ [Vagrant] [9]
- Pro:การตั้งค่าไม่น่ากลัวอย่างที่คุณคิด
- โปร:เร็ว !!
- Pro:เครื่องมือ Frontend ล่าสุด (Sass, Compass ฯลฯ ) อัปเดตด้วยตัวจัดการแพ็คเกจ linux
- Con: การตั้งค่าเริ่มต้นอาจเป็นเรื่องยากสำหรับผู้ใช้ที่ไม่ใช่ linux
- Con:ตอนนี้ข้อกำหนดด้านสิ่งแวดล้อมเกี่ยวข้องกับการโฮสต์ VM
- Con: VM อาจมีปัญหาในการปรับขนาด / การบำรุงรักษา
ในความคิดของฉัน LESS การใช้ [DotLessCSS] [6] เป็นตัวเลือกที่ดีที่สุดสำหรับโครงการพัฒนาเว็บทั่วไปของคุณด้วยเหตุผลที่ระบุไว้ข้างต้น
เมื่อสองสามปีก่อนฉันพบว่า [DotLessCSS] [6] มีข้อบกพร่องและข้อ จำกัด ที่น่ารำคาญ แต่การใช้ [DotLessCSS] [6] อีกครั้งในปี 2012 ในบางโครงการฉันมีความสุขกับการตั้งค่ามาก ฉันไม่ได้แนะนำความเจ็บปวดให้กับนักพัฒนาของฉันโดยใช้ Sass / Ruby และใช้ประโยชน์จาก LESS ให้ได้มากที่สุด เหนือสิ่งอื่นใดไม่มีข้อกำหนด IDE หรือเวิร์กสเตชัน
[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/
ฉันเพิ่งเขียน Add-in Visual Studio พร้อมคำแนะนำโดยละเอียดรวมถึงภาพหน้าจอเกี่ยวกับวิธีทำให้ Sass เข้าสู่ Visual Studio ตรวจสอบได้ที่นี่ - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/
ฉันเพิ่งพบสิ่งนี้เมื่อวานนี้มันดูมีแนวโน้มดีทีเดียวนอกจาก sass / scss แล้วมันจะจัดการกับ JS อัตโนมัติ (ยังไม่ใช่ CSS) และการรวมไฟล์ สิ่งหนึ่งที่ฉันหวังคือให้มีคนสร้างปลั๊กอิน VS สำหรับแก้ไขไฟล์ sass / scss สิ่งที่ฉันพบว่ามีปัญหาคือเมื่อคุณมีข้อผิดพลาดในโค้ด sass / scss ของคุณคุณจะพบว่ามันทำการทดสอบหรือตรวจสอบไฟล์ CSS ที่สร้างขึ้นเท่านั้น ฉันไม่ได้ใส่มันผ่านทุกก้าว แต่จนถึงตอนนี้ดีมาก
#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