ASP.NET के साथ SASS का उपयोग करना [बंद]

Question

मैं ASP.NET वातावरण में रूबी HAML पैकेज से SASS (Syntactically Awesome StyleSheets) का उपयोग करने के तरीकों पर गौर कर रहा हूं । आदर्श रूप में, मैं निर्माण प्रक्रिया का एक सहज हिस्सा होने के लिए CSS में SASS फाइलों का संकलन चाहूंगा।

इस एकीकरण के सबसे अच्छे तरीके क्या हैं? वैकल्पिक रूप से, क्या अन्य सीएसएस-पीढ़ी के उपकरण हैं जो .NET पर्यावरण के लिए बेहतर अनुकूल हैं?

Comments

मैं कल HN में इस बारे में पढ़ रहा था और सोच रहा था कि इस तरह के औजारों का व्यापक उपयोग कैसे होता है

— सूर्या

मैं हमारे मावेन लिपियों में SASS को एकीकृत कर रहा हूँ। किसी ने मावेन रूबी प्लगइन का उपयोग करके यह प्रयास किया है?

— क्रिस्टोफर टोकर

मुझे समझ नहीं आता कि यह प्रश्न "रचनात्मक" कैसे नहीं है। नहीं जहां सवाल में यह SASS की तुलना LESS (या कुछ और) से करने के लिए कहता है। नीचे दिए गए उत्तर मेरे लिए काफी मददगार हैं जो यह देखना चाहते हैं कि .NET में SASS का उपयोग करने के विकल्प क्या हैं।

— केल्विन

मैं इससे भी असहमत हूं। वेब डेवलपमेंट की तेजी से भागती दुनिया में बेस्ट-प्रैक्टिस अक्सर डेवलपर्स से ही होती है न कि कुछ गवर्निंग बॉडी से!

— फिल रिकेट्स

Answer 1

विज़ुअल स्टूडियो में बेहतर काम करने के अनुभव के लिए, आप वेब एसेंशियल के अंतिम संस्करण को स्थापित कर सकते हैं जो Sass (SCSS सिंटैक्स) का समर्थन करना शुरू कर रहा है।
वैकल्पिक रूप से आप Sassy Studio या Web Workbench स्थापित कर सकते हैं ।

फिर अपने ASP.NET प्रोजेक्ट में अपनी .sass / .scss फ़ाइलों को संकलित करने के लिए, कुछ अलग-अलग टूल हैं: Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCfish के माध्यम से ...

---

वेब एसेंशियल विजुअल स्टूडियो के लिए पूरी तरह से चित्रित प्लगइन है, जो वास्तव में सभी फ्रंट-एंड सामान के लिए बेहतर अनुभव देता है। नवीनतम संस्करण Sass (SCSS सिंटैक्स) का समर्थन करना शुरू कर रहा है। आंतरिक रूप से यह CSS को SCSS संकलित करने के लिए Libsass का उपयोग करता है।

---

वेब वर्कबेंच विजुअल स्टूडियो के लिए एक और प्लगइन है जो एससीएसएस फाइलों को संपादित करने के लिए सिंटैक्स हाइलाइटिंग, इंटैलिसेंस और कुछ अन्य उपयोगी सामान जोड़ता है। यह आपके कोड को सामान्य या छोटा सीएसएस में भी संकलित कर सकता है। आंतरिक रूप से इसने रूबी सैस कंपाइलर के लिपटे संस्करण का उपयोग किया।

---

Sassy Studio : विज़ुअल स्टूडियो के लिए एक और प्लगइन। कम चित्रित लेकिन बहुत हल्का।

---

Libsass पुस्तकालय सास सीएसएस precompiler (अभी भी विकास में) की सी ++ बंदरगाह है। मूल संस्करण रूबी में लिखा गया था, लेकिन यह संस्करण दक्षता और पोर्टेबिलिटी के लिए है। यह पुस्तकालय विभिन्न प्लेटफार्मों और भाषाओं के साथ हल्का, सरल और निर्माण और एकीकृत करने का प्रयास करता है।

लिबास लाइब्रेरी के आसपास कई रैपर हैं:

• SassC : एक कमांड लाइन कंपाइलर (विंडोज पर आपको sassc.exe प्राप्त करने के लिए MsysGit के साथ SassC के स्रोत को संकलित करने की आवश्यकता है)।
• NSass : a .Net रैपर।
• नोड-सास : Node.js. पर Libsass का उपयोग करने के लिए
• आदि।

---

Compass , Sass के लिए एक फ्रेमवर्क है जो बहुत सारे उपयोगी हेल्पर्स (जैसे इमेज स्प्रिटिंग) को जोड़ता है और आपके SCSS / Sass को भी कंपाइल कर सकता है। लेकिन आपको प्रत्येक विकास के माहौल पर रूबी को स्थापित करने की आवश्यकता है जहां आपको अपनी शैलियों को संकलित करने की आवश्यकता है।

---

SassAndCfish एक पैकेज है जो कुछ DLL और कॉन्फिगरेशन के माध्यम से SCSS / Sass संकलन और मिनिमाइज़ेशन सपोर्ट को जोड़ता है। वेब वर्कबेंच कंपाइलर पर इसका लाभ यह है कि यह आपके विज़ुअल स्टूडियो समाधान में आत्म-निहित है: आपको प्रत्येक विकास वातावरण पर एक प्लगइन स्थापित करने की आवश्यकता नहीं है। टिप्पणी: SassAndCfish अक्सर अपडेट नहीं किया जाता है, और क्योंकि यह आधिकारिक रूबी कंपाइलर को लपेटने के लिए आयरनरबी का उपयोग करता है, आप कुछ प्रदर्शन मुद्दों को प्राप्त कर सकते हैं। आप Nuget पैकेज के माध्यम से नवीनतम संस्करण स्थापित कर सकते हैं।

Comments

उपलब्ध दो विकल्पों का अच्छा सारांश।

— कोणीय काल

Answer 2

कम्पास परियोजना में एक संकलक होता है जो आपके sass को css में संकलित करेगा। यह खिड़कियों पर चलने के लिए बनाया गया है, लेकिन यह उस प्लेटफॉर्म पर अच्छी तरह से परखा नहीं गया है। यदि आपको कोई प्लेटफ़ॉर्म संबंधित बग मिलते हैं, तो मैं ख़ुशी से उन्हें ठीक करने में आपकी मदद करूँगा।

कम्पास यहाँ पाया जा सकता है: http://github.com/chriseppsein/compass

Comments

कम्पास के साथ महान काम, वास्तव में बहुत बढ़िया लग रहा है।

— सूर्या

जवाब के लिए धन्यवाद - मैं कल इस पर गौर करूंगा

— Guundmundur H

Answer 3

2015 में, मेरी वर्तमान सलाह है कि Node.js(सर्वर-साइड जावास्क्रिप्ट प्लेटफॉर्म) और gulp.js(एक टास्क रनर नोड पैकेज) का उपयोग किया जाए, साथ ही gulp-sass( लिबास को लागू करने वाले गलप के लिए एक नोड पैकेज - रूबी एसएएस का एक तेज सी पोर्ट)।

आप इस तरह से एक ट्यूटोरियल के साथ शुरुआत कर सकते हैं ।

बंडलिंग पसंद करते हैं? बंडल ट्रांसफार्मर अब अंततः उच्च गति संकलन को सक्षम करने, लिबास का उपयोग करता है।

यहाँ मुझे लगता है कि आपको Node और Gulp का उपयोग करना चाहिए।

• Node अब फ्रंटेंड टूलिंग के लिए लोकप्रिय है
  कई वेब डेवलपर्स अब Node का उपयोग फ़ोरम वेब डेवलपमेंट कार्यों के लिए एक प्लेटफ़ॉर्म का उपयोग कर रहे हैं। यह अभी हो रहा है - चाहे वह ग्रंट, Gulp, JSPM, Webpack, या कुछ और है NPM ।
  चीज़ें जो आप npm संकुल के साथ कर सकते हैं:
  • सास, कम, पोस्टसीएसएस और कई और अधिक के साथ संकलन शैलियों
  • जावास्क्रिप्ट, सीएसएस, एचटीएमएल टेम्पलेट्स और अधिक
  • जेएस और ट्रांसपाइल ईएस 6-7 के अन्य संस्करणों को लिखें, टाइपस्क्रिप्ट, ईएस 5 को कॉफ़ीस्क्रिप्ट
  • स्थानीय SVG फ़ाइलों से iconfonts बनाएँ
  • मिनिमाइज़ जेएस, सीएसएस, एसवीजी
  • छवियों का अनुकूलन करें
  • व्हेल बचाओ
  • ...
• एक प्रोजेक्ट के लिए नए डेवलपर्स के लिए सरल सेटअप एक
  बार जब आप अपनी परियोजना स्थापित कर लेते हैं package.jsonऔर gulpfile.js, यह सब आम तौर पर चलने के लिए होता है, तो यह कुछ कदम है:
  
  • डाउनलोड करें और Node.js स्थापित करें
  • भागो npm install -g gulp (विश्व स्तर पर स्थापित करता है)
  • रन npm install (स्थानीय रूप से प्रोजेक्ट पैकेज स्थापित करता है)
  • चलाएं gulp taskname (इस बात पर निर्भर करता है कि आपने अपना gulpfile.jsटास्कनेम कैसे सेट किया है , वह आपके SASS, जावास्क्रिप्ट आदि को संकलित करता है)
• विजुअल स्टूडियो 2015 द्वारा समर्थित
  मानो या न मानो, VS2015 अब आपके लिए सभी कमांडलाइन सामान को संभाल सकता है!

वर्कफ़्लो के संदर्भ में आपके पास कुछ विशिष्ट विकल्प हैं:

• क्या आपके डेवलपर्स ने रिपॉजिटरी के लिए अपना संकलित कोड नीचे किया है
  : डेवलपर्स को gulpउत्पादन-तैयार परिसंपत्तियों को संकलित करने के लिए हमेशा चलना चाहिए या इसके समान होना चाहिए

• आपकी बिल्ड | स्टेज | रिलीज से पहले प्रोडक्शन सर्वर गपशप के काम चलाते हैं।
  इस तरह सेट अप करने के लिए और अधिक जटिल हो सकता है, लेकिन इसका मतलब है कि काम वेरिफाइड है और अन-सोर्स से नया बनाया गया है।

नीचे 2012 से मेरा पुराना उत्तर है, जो पोस्टरिटी के लिए रखा गया है:

रूबी, पायथन और C # .NET के साथ काम करने वाले एक प्रोजेक्ट-लीडिंग फ्रंटएंड डेवलपर से, मेरे पास ये विचार हैं:

सास और कम

मैं एक नई परियोजना पर [सैस] [१] का उपयोग करना पसंद करता हूं, विशेष रूप से अद्भुत [कम्पास ढांचे] [२] के साथ। कम्पास काम का एक बड़ा टुकड़ा है, और मेरी प्रक्रिया में बहुत अधिक मूल्य जोड़ता है। सैस में एक महान समुदाय, ओके प्रलेखन और एक शक्तिशाली सुविधा सेट है। सास एक रूबी पुस्तकालय है।

Sass का एक विकल्प, [LESS] [3] है। इसमें समान सिंटैक्स और विशेषताएं हैं, लेकिन एक छोटा समुदाय और थोड़ा बेहतर प्रलेखन। एक जेएस पुस्तकालय कम।

ट्रेंड-वार, लोग समय के साथ सास की ओर बढ़ने लगते हैं क्योंकि यह अच्छी तरह से विकसित है, यहां तक ​​कि सीएसएस स्तर 4 सुविधाओं का समर्थन भी करता है। लेकिन LESS अभी भी पूरी तरह से प्रयोग करने योग्य है, और आसानी से इसका उपयोग करके वारंट में पर्याप्त मूल्य जोड़ता है।

ASP.NET प्रोजेक्ट में Sass / LESS का उपयोग करने पर

जब मैं सैस का उपयोग करना पसंद करता हूं, तो .NET प्रोजेक्ट्स के साथ काम करने के लिए रूबी / सैस प्राप्त करना दर्दनाक हो सकता है, क्योंकि यह सेटअप, विदेशी के लिए कठिन है, और डेवलपर्स को निराश कर सकता है।

आपके पास कुछ विकल्प हैं:

• सैस: नेटिव रूबी + सैस
  • प्रो: सबसे तेज सर्वर संकलन
  • प्रो: सैस के नवीनतम संस्करणों का उपयोग करने में सक्षम
  • Con: उठने और चलने में भारी परेशानी
  • Con: हर सर्वर या वर्कस्टेशन को माणिक सेटिंग की आवश्यकता होती है
  • कॉन: रूबी / एकीकरण समस्याओं को हल करने के लिए .NET देवों के लिए हार्डर
• Sass: Ruby .NET पोर्ट जैसे [IronRuby] [5] + Sass
  • प्रो: धीमी सर्वर संकलन (फ्रंटेंड देवता शिकायत करेंगे!)
  • प्रो: सास के नवीनतम संस्करणों का उपयोग करने में सक्षम नहीं हो सकता है
  • प्रो: मूल निवासी की तुलना में सेटअप करने के लिए थोड़ा आसान है
  • Con: हर सर्वर या वर्कस्टेशन को माणिक सेटिंग की आवश्यकता होती है
  • कॉन: रूबी / एकीकरण समस्याओं को हल करने के लिए .NET देवों के लिए हार्डर
• Sass: [बंडल बंडलिंग] [7] [7] + Sass के साथ [.NET बंडलिंग] [8] बढ़ाएँ
  • प्रो: (IronRuby का उपयोग करता है) धीमी सर्वर संकलन (फ्रंटेंड देव शिकायत करेंगे!)
  • प्रो: (आयरनरुबी का उपयोग करता है) सास के नवीनतम संस्करणों का उपयोग करने में सक्षम नहीं हो सकता है
  • प्रो: (आयरनराबी का उपयोग करता है) मूल रूप से रूबी की तुलना में सेटअप करने में थोड़ा आसान है
  • Con: हर सर्वर या वर्कस्टेशन को माणिक सेटिंग की आवश्यकता होती है
  • कॉन: रूबी / एकीकरण समस्याओं को हल करने के लिए .NET देवों के लिए हार्डर
• सैस या लेस: विजुअल स्टूडियो प्लगइन जैसे [माइंडस्केप कार्यक्षेत्र] [4]
  • प्रो: शुरू करने के लिए आसान
  • प्रो: तेजी से संकलन
  • Con: सास शैलियों के साथ काम करने वाले प्रत्येक डेवलपर को एक IDE प्लगइन की आवश्यकता होती है
  • Con: सर्वर पर शैलियों को जल्दी से बदल नहीं सकते - इसके लिए स्थानीय री-प्रोसेसिंग की आवश्यकता होती है
• LESS: .NET पोर्ट जैसे [DotLessCSS] [6]
  • प्रो: फास्ट सर्वर संकलन
  • प्रो: सेटअप करने के लिए बहुत आसान है
  • प्रो: सी # .NET देवों के लिए आरामदायक
  • प्रो: कोई आईडीई / वर्कस्टेशन / सर्वर आवश्यकताएँ - इसे वेब ऐप में ही शामिल करें
  • Con: SASS / कम्पास की बहुमुखी प्रतिभा नहीं मिली है, और हमेशा नवीनतम LESS.JS सिंटैक्स संगतता की गारंटी नहीं दे सकता है
• सैस: वर्चुअलाइज़ लक्स + रूबी विथ [वैग्रंट] [९]
  • प्रो: आपको लगता है कि सेटअप करने के लिए भयानक नहीं है
  • प्रो: फास्ट !!
  • प्रो: नवीनतम फ्रंटएंड टूल्स (सास, कम्पास आदि), लिनक्स पैकेज मैनेजर के साथ अपडेट किया गया
  • Con: प्रारंभिक सेटअप गैर-लाइनक्स उपयोगकर्ताओं के लिए मुश्किल हो सकता है
  • Con: पर्यावरण आवश्यकताओं में अब VM को होस्ट करना शामिल है
  • Con: VM में स्केलेबिलिटी / रखरखाव के मुद्दे हो सकते हैं

मेरे विचार में, LESS [DotLessCSS] का उपयोग करते हुए [6] आपके सामान्य वेब डेवलपमेंट प्रोजेक्ट के लिए सबसे अच्छा विकल्प है, ऊपर दिए गए कारणों के लिए।

कुछ साल पहले, मैंने पाया कि [DotLessCSS] [6] कष्टप्रद बग और सीमाएँ हैं, लेकिन कुछ परियोजनाओं पर 2012 में [DotLessCSS] [6] का फिर से उपयोग करते हुए, मैं सेटअप के साथ बहुत खुश हूँ। मैंने अपने डेवलपर्स को Sass / Ruby का उपयोग करके दर्द का परिचय नहीं दिया है और कम से कम मूल्य प्राप्त करें। सबसे अच्छा, कोई आईडीई या वर्कस्टेशन आवश्यकताओं।

[१]: http://sass-lang.com/ [२]: http://compass-style.org/ [३]: http://lesscss.org/ [४]: http: // www। mindcapehq.com/products/web-workbench [5]: http://www.ironruby.net/ [6]: http://www.dotlesscss.org/ [7]: http://bundletransformer.codeplex.com / [ / ]: 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/

Comments

में बंडल ट्रांसफार्मर 1.9.81 के लिए संक्रमण की वजह से libSass काफी BundleTransformer.SassAndScss मॉड्यूल के प्रदर्शन बढ़ा दी गई है।

— एंड्रे तारित्सिन 15

एंड्री, मुझे कुछ साल पहले बंडलट्रांसफॉर्मर का उपयोग करने की कोशिश करने से आपका नाम याद है! मैंने इसके लिए एक नोट जोड़ा है, क्योंकि यह कुछ देवों के लिए बेहतर होगा।

— फिल रिकेट्स

Answer 4

मैंने अभी एक विजुअल स्टूडियो एड-इन विस्तृत विवरण के साथ स्क्रीनशॉट सहित निर्देश दिए कि कैसे विज़ुअल स्टूडियो के लिए सैस चल रहा है। इसे यहां देखें - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Answer 5

यह नहीं है, लेकिन आप .NET पोर्ट के लिए हमारी कम सीएसएस पर एक नज़र डाल सकते हैं । कम्पास वास्तव में हालांकि दिलचस्प लगता है, और मुझे लगता है कि लेस के लिए ऐसा कुछ एक बढ़िया अतिरिक्त होगा।

Answer 6

मुझे कल ही यह मिला था, यह काफी आशाजनक लग रहा है, एक तरफ सैस / स्कैस से यह जेएस के स्वचालितकरण (सीएसएस - अभी तक नहीं) और फाइलों के संयोजन को संभाल लेगा। एक चीज जो मैं उम्मीद कर रहा हूं वह है कि किसी व्यक्ति के लिए sass / scss फाइलों के संपादन के लिए VS प्लगइन बनाना। मैंने जो समस्याग्रस्त पाया, वह यह था कि जब आपको अपने sass / scss कोड में कोई त्रुटि होती है, तो आप इसे केवल उत्पन्न CSS फाइलों का परीक्षण या निरीक्षण करते हुए पाते हैं। मैंने इसे अपने सभी पेस के माध्यम से नहीं डाला है, लेकिन अभी तक बहुत अच्छा है।

https://github.com/xpaulbettsx/SassAndCoffee

Answer 7

मैंने मूल रूप से इस प्रश्न का उत्तर यहां दिया है ।

#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