এএসপি.নেটের সাথে SASS ব্যবহার করা [বন্ধ]


101

আমি উপায় ব্যবহার করতে দৃষ্টিপাত করছি Sass একটি ASP.NET পরিবেশে রুবি HAML প্যাকেজ থেকে (শব্দবিন্যাসগত দিক জট্টিল স্টাইলশীট)। আদর্শভাবে, আমি SASS ফাইলগুলি সংকলনটি বিল্ড প্রক্রিয়াটির একটি নির্বিঘ্নে অংশে পরিণত করতে চাই CSS

এই সংহতকরণের সেরা উপায়গুলি কী কী? বিকল্পভাবে, অন্যান্য সিএসএস-প্রজন্মের সরঞ্জামগুলি কী। নেট নেটওয়ার্কের জন্য আরও উপযুক্ত?


আমি গতকাল এইচএন-তে এটি পড়ছিলাম এবং ভাবছিলাম যে এই জাতীয় সরঞ্জামগুলির ব্যাপক ব্যবহার কীভাবে হয়
সূর্য

আমি আমাদের মাভেন স্ক্রিপ্টগুলিতে SASS একীভূত করতে চাইছি। কেউ কি মাভেন রুবি প্লাগইন ব্যবহার করে এটি চেষ্টা করেছে?
ক্রিস্টোফার টোকার

3
আমি বুঝতে পারছি না যে এই প্রশ্নটি "গঠনমূলক" নয়। প্রশ্নে যেখানে এটি SASS কে কম (বা অন্য কোনও কিছুর) সাথে তুলনা করতে বলে। নীচের উত্তরগুলি আমার পক্ষে বেশ সহায়ক যারা যারা। নেট এ SASS ব্যবহারের বিকল্পগুলি কী কী তা দেখতে চান।
ক্যালভিন

1
এটি বন্ধ হওয়ার সাথে আমিও একমত নই। ওয়েব বিকাশের দ্রুতগতির বিশ্বে সেরা অনুশীলনগুলি প্রায়শই বিকাশকারীদের কাছ থেকে আসে এবং কোনও পরিচালনা পর্ষদ নয়!
ফিল রিকিটস

উত্তর:


41

ভিজ্যুয়াল স্টুডিওতে আরও ভাল কাজের অভিজ্ঞতার জন্য আপনি ওয়েব এসেনশিয়ালের শেষ সংস্করণটি ইনস্টল করতে পারেন যা সাস (এসসিএসএস সিনট্যাক্স) সমর্থন করতে শুরু করে।
বিকল্পভাবে আপনি স্যাসি স্টুডিও বা ওয়েব ওয়ার্কবেঞ্চ ইনস্টল করতে পারেন ।

তারপরে আপনার এএসপি.এনইটি প্রকল্পে আপনার .sass / .scss ফাইলগুলি সংকলন করতে কিছু আলাদা আলাদা সরঞ্জাম রয়েছে: ওয়েব এসেনশিয়াল , ওয়েব ওয়ার্কবেঞ্চ , স্যাসক , স্যাস.নেট , কম্পাস , স্যাসএন্ডকফির মাধ্যমে ...


ওয়েব জরুরী ভিজুয়াল স্টুডিওর জন্য একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত প্লাগইন, যা সমস্ত ফ্রন্ট-এন্ড স্টাফের জন্য সত্যই আরও ভাল অভিজ্ঞতা দেয়। সর্বশেষতম সংস্করণটি সাসকে (এসসিএসএস সিনট্যাক্স) সমর্থন করা শুরু করছে। অভ্যন্তরীণভাবে এটি এসএসএসএসকে সিএসএসে সংকলন করতে লিবাসাস ব্যবহার করে।


ওয়েব ওয়ার্কবেঞ্চ ভিজ্যুয়াল স্টুডিওর আরেকটি প্লাগইন যা এসসিএসএস ফাইল সম্পাদনা করার জন্য সিনট্যাক্স হাইলাইটিং, ইন্টেলিজেন্স এবং কিছু অন্যান্য দরকারী স্টাফ যুক্ত করে। এটি আপনার কোডটি সাধারণ বা মাইনযুক্ত সিএসএসেও সংকলন করতে পারে। অভ্যন্তরীণভাবে এটি রুবি স্যাস সংকলকটির একটি মোড়ানো সংস্করণ ব্যবহার করে।


স্যাসি স্টুডিও : ভিজ্যুয়াল স্টুডিওর আরেকটি প্লাগইন। কম বৈশিষ্ট্যযুক্ত তবে অনেক হালকা।


Libsass গ্রন্থাগার Sass সিএসএস precompiler (এখনও উন্নয়নে) এর সি ++ পোর্ট। মূল সংস্করণটি রুবিতে লেখা হয়েছিল, তবে এই সংস্করণটি দক্ষতা এবং বহনযোগ্যতার জন্য is এই গ্রন্থাগারটি বিভিন্ন প্ল্যাটফর্ম এবং ভাষাগুলির সাথে হালকা, সহজ এবং সহজেই বিল্ডিং এবং সংহত হওয়ার চেষ্টা করে।

লিবাসাস লাইব্রেরির চারপাশে বেশ কয়েকটি মোড়ক রয়েছে:

  • এসএসসি : একটি কমান্ড লাইন সংকলক (উইন্ডোজে স্যাস্যাক.এক্সি পেতে আপনাকে এমএসজিগিতের সাথে স্যাসিকের উত্সটি সংকলন করতে হবে)।
  • এনসাস : একটি। নেট মোড়ক
  • নোড-সাস : নোড.জেএস-তে লিবসাস ব্যবহার করতে
  • ইত্যাদি

কম্পাস Sass যে (ইমেজ spriting মত) দরকারী সাহায্যকারী অনেক যোগ করতে পারেন এবং আপনার SCSS / Sass কম্পাইল করতে পারেন জন্য একটি কাঠামো নেই। তবে আপনাকে প্রতিটি বিকাশের পরিবেশে রুবি ইনস্টল করতে হবে যেখানে আপনার স্টাইলগুলি সংকলন করতে হবে।


সাসএন্ডকফি এমন একটি প্যাকেজ যা কিছু ডিএলএল এবং কনফিগারেশনের মাধ্যমে এসসিএসএস / সাস সংকলন এবং মিনিফিকেশন সমর্থন যুক্ত করে। ওয়েব ওয়ার্কবেঞ্চ সংকলকটির এর সুবিধা হ'ল এটি আপনার ভিজ্যুয়াল স্টুডিও সমাধানে স্ব-অন্তর্ভুক্ত: আপনার প্রতিটি বিকাশের পরিবেশে একটি প্লাগইন ইনস্টল করার দরকার নেই। মন্তব্য: সাসএন্ডকফি প্রায়শই আপডেট হয় না এবং এটি সরকারী রুবি সংকলকটি মোড়ানোর জন্য আয়রন রুবি ব্যবহার করার কারণে আপনি কিছু কার্য সম্পাদনের সমস্যা পেতে পারেন। আপনি নুগেট প্যাকেজের মাধ্যমে সর্বশেষতম সংস্করণ ইনস্টল করতে পারেন।


1
দুটি বিকল্পের ভাল সংক্ষিপ্তসার।
অ্যাঙ্গুলারসেন

26

কম্পাস প্রকল্পের একটি সংকলক রয়েছে যা আপনার এসএসএসকে সিএসএসে সংকলন করবে। এটি উইন্ডোতে চালানোর জন্য নির্মিত, তবে এটি প্ল্যাটফর্মে ভালভাবে পরীক্ষিত হয় না। যদি আপনি প্ল্যাটফর্ম সম্পর্কিত কোনও বাগ খুঁজে পান তবে আমি আনন্দের সাথে এগুলি ঠিক করতে সহায়তা করব।

কম্পাস এখানে পাওয়া যাবে: http://github.com/chriseppsein/compass


কম্পাস সহ দুর্দান্ত কাজ, দুর্দান্ত দেখায়।
সূর্য 15

উত্তরের জন্য ধন্যবাদ - আমি আগামীকাল এটিকে সন্ধান করব
গুয়ামুন্ডুর এইচ

24

২০১৫ সালে, আমার বর্তমান পরামর্শটি হ'ল Node.js(সার্ভার-সাইড জাভাস্ক্রিপ্ট প্ল্যাটফর্ম) এবং gulp.js(একটি টাস্ক রানার নোড প্যাকেজ) পাশাপাশি gulp-sass(গুল্প বাস্তবায়নের লিবাসের জন্য নোড প্যাকেজ - রুবি এসএএসএসের একটি দ্রুত সি বন্দর)।

আপনি এই জাতীয় টিউটোরিয়াল দিয়ে শুরু করতে পারেন ।

বান্ডলিং পছন্দ? বান্ডেল ট্রান্সফর্মার এখন অবশেষে উচ্চ-গতির সংকলন সক্ষম করে লিবাসাস ব্যবহার করে।

এখানে কেন আমি মনে করি আপনার নোড এবং গুল্প ব্যবহার করা উচিত।

  • নোড এখন ফ্রন্টএন্ড টুলিংয়ের জন্য জনপ্রিয়
    অনেক ওয়েব বিকাশকারী এখন নোডকে ফ্রন্টএন্ড ওয়েব ডেভলপমেন্ট টাস্কের জন্য একটি প্ল্যাটফর্ম ব্যবহার করছে। এতে ডান এখন ঘটছে - এটি ঘোঁৎ ঘোঁৎ, Gulp, JSPM, Webpack, বা অন্য কিছু npm
    এনপিএম প্যাকেজগুলির সাথে আপনি যে জিনিসগুলি করতে পারেন:
    • সাস, কম, পোস্টসিএসএস এবং আরও অনেক কিছুর সাথে শৈলীগুলি সংগ্রহ করুন
    • জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল টেমপ্লেট এবং আরও অনেক কিছু সংঘবদ্ধ করুন
    • জেএসের অন্যান্য সংস্করণগুলি লিখুন এবং ES6-7, টাইপসক্রিপ্ট, কফিসিপিটি ES5 এ স্থানান্তর করুন
    • স্থানীয় এসভিজি ফাইলগুলি থেকে আইকনফন্টগুলি তৈরি করুন
    • জেএস, সিএসএস, এসভিজি মিনিফাই করুন
    • চিত্রগুলি অনুকূলিত করুন
    • তিমি বাঁচাও
    • ...
  • একটি প্রকল্পে নতুন বিকাশকারীদের জন্য সহজ সেটআপ
    একবার আপনি আপনার প্রকল্প সেট আপ করে নিলে package.jsonএবং gulpfile.jsচলমান পেতে সাধারণত যা লাগে তা কয়েকটি পদক্ষেপ:
    • নোড.জেএস ডাউনলোড এবং ইনস্টল করুন
    • চালান npm install -g gulp (বিশ্বব্যাপী গল্প ইনস্টল করে)
    • চালান npm install (স্থানীয়ভাবে প্রকল্প প্যাকেজ ইনস্টল করে)
    • চালান gulp taskname (আপনি কীভাবে আপনার gulpfile.jsটাস্কনামটি সেট আপ করেছেন তার উপর নির্ভর করে এমন একটি টাস্ক চলবে যা আপনার এসএএসএস, জাভাস্ক্রিপ্ট ইত্যাদি সংকলন করে)
  • ভিজ্যুয়াল স্টুডিও 2015 দ্বারা সমর্থিত
    এটি বিশ্বাস করুন বা না, ভিএস ২০১৫ এখন আপনার জন্য সমস্ত কমান্ডলাইন স্টাফ পরিচালনা করতে পারে!

কর্মপ্রবাহের ক্ষেত্রে আপনার কাছে বেশ কয়েকটি আদর্শ বিকল্প রয়েছে:

  • আপনার বিকাশকারীদের তাদের সংকলিত কোডটি ভাণ্ডার
    ডাউনসাইডে কমিট করুন : বিকাশকারীদের অবশ্যই সর্বদা চালানো gulpবা উত্পাদন-প্রস্তুত সম্পদগুলি সংকলনের অনুরূপ করতে হবে

  • আপনার বিল্ড | পর্যায় | উত্পাদনের সার্ভারগুলি রিলিজের আগে গাল্প কাজগুলি চালায়
    এই ভাবে সেট আপ করা আরও জটিল হতে পারে তবে এর মানে হল যে কাজটি বৈধ হয়েছে এবং আবদ্ধ উত্স থেকে তাজা নির্মিত হয়েছে।

নীচে আমার পুরানো উত্তর আছে ২০১২ সাল থেকে উত্তরোত্তর জন্য রাখা:

রুবি, পাইথন এবং সি #। নেট এর সাথে কাজ করে এমন একটি প্রকল্পের শীর্ষস্থানীয় অগ্রণী বিকাশকারী থেকে আমার এই চিন্তাভাবনাগুলি রয়েছে:

Sass এবং কম

আমি একটি নতুন প্রকল্পে [সাস] [1] ব্যবহার করতে পছন্দ করি, বিশেষত দুর্দান্ত [কম্পাস কাঠামো] [২] সহ। কম্পাস একটি দুর্দান্ত কাজ, এবং আমার প্রক্রিয়াতে অনেক মূল্য যুক্ত করে। সাসের একটি দুর্দান্ত সম্প্রদায়, ওকে ডকুমেন্টেশন এবং একটি শক্তিশালী বৈশিষ্ট্য সেট রয়েছে। সাস একটি রুবি গ্রন্থাগার।

সাসের বিকল্প, হ'ল [কম] [৩]। এটিতে অনুরূপ বাক্য গঠন এবং বৈশিষ্ট্য রয়েছে তবে একটি ছোট সম্প্রদায় এবং কিছুটা ভাল ডকুমেন্টেশন। একটি জেএস লাইব্রেরি কম।

প্রবণতা অনুসারে, লোকেরা সময়ের সাথে সাথে সাসের দিকে ঝুঁকতে থাকে কারণ এটি উন্নত, এমনকি সিএসএস স্তর 4 বৈশিষ্ট্যগুলিকে সমর্থন করে। তবে কম এখনও নিখুঁতভাবে ব্যবহারযোগ্য এবং এটি ব্যবহারের জন্য ওয়ারেন্ট দেওয়ার জন্য সহজেই যথেষ্ট পরিমাণ যুক্ত করে।

একটি এএসপি.এনইটি প্রকল্পে সাস / কম ব্যবহার করার সময়

যদিও আমি সাসকে ব্যবহার করতে পছন্দ করি, রুটিক / স্যাসকে। নেট প্রকল্পের সাথে কাজ করাটা বেদনাদায়ক হতে পারে, কারণ এটি সেটআপ করা শক্ত, বিদেশী এবং বিকাশকারীদের হতাশ করতে পারে।

আপনার স্বল্প কিছু সু্যোগ আছে:

  • সাস: নেটিভ রুবি + সাস
    • প্রো: দ্রুততম সার্ভার সংকলন
    • প্রো: সাসের সর্বশেষ সংস্করণগুলি ব্যবহারে সক্ষম
    • কন: উঠে পড়ার জন্য প্রচুর ঝামেলা
    • কন: প্রতিটি সার্ভার বা ওয়ার্কস্টেশনে রুবি সেটআপ দরকার
    • কন: রুবি / ইন্টিগ্রেশন সমস্যাগুলি সমাধান করার জন্য। নেট নেটগুলির পক্ষে আরও শক্ত
  • সাস: রুবি। নেট বন্দরের মত [আয়রণরবি] [৫] + সাস
    • প্রো: স্লু সার্ভার সংকলন (ফ্রন্ট্যান্ড ডেভস অভিযোগ করবে!)
    • প্রো: সাস এর সর্বশেষ সংস্করণ ব্যবহার করতে সক্ষম হতে পারে না
    • প্রো: নেটিভ রুবির তুলনায় সেটআপ করা কিছুটা সহজ
    • কন: প্রতিটি সার্ভার বা ওয়ার্কস্টেশনে রুবি সেটআপ দরকার
    • কন: রুবি / ইন্টিগ্রেশন সমস্যাগুলি সমাধান করার জন্য। নেট নেটগুলির পক্ষে আরও শক্ত
  • সাস: [বান্ডেল ট্রান্সফরমার] এর সাথে [। নেট বান্ডিলিং] [8] প্রসারিত করুন []] + সাস
    • প্রো: (IronRuby ব্যবহার করে) স্লু সার্ভার সংকলন (ফ্রন্ট্যান্ড ডেভস অভিযোগ করবে!)
    • প্রো: (আয়রণরবি ব্যবহার করে) সাসের সর্বশেষ সংস্করণ ব্যবহার করতে সক্ষম হতে পারে না
    • প্রো: (আইরন রুবি ব্যবহার করে) নেটিভ রুবির তুলনায় সেটআপ করা কিছুটা সহজ
    • কন: প্রতিটি সার্ভার বা ওয়ার্কস্টেশনে রুবি সেটআপ দরকার
    • কন: রুবি / ইন্টিগ্রেশন সমস্যাগুলি সমাধান করার জন্য। নেট নেটগুলির পক্ষে আরও শক্ত
  • এস এস বা কম: ভিজ্যুয়াল স্টুডিও প্লাগইন [মাইন্ডস্কেপ ওয়ার্কবেঞ্চ] [৪] এর মতো
    • প্রো: শুরু করা সহজ
    • প্রো: দ্রুত সংকলন
    • কন: সাস শৈলীর সাথে কাজ করা প্রতিটি বিকাশকারীকে একটি আইডিই প্লাগইন প্রয়োজন
    • কন: শীঘ্রই সার্ভারে শৈলীগুলি পরিবর্তন করতে পারে না - এর জন্য স্থানীয় পুনরায় প্রক্রিয়াজাতকরণ প্রয়োজন
  • কম: .NET বন্দর মত [ডটলেসসিএসএস] []]
    • প্রো: দ্রুত সার্ভার সংকলন
    • প্রো: সেটআপ করা খুব সহজ
    • প্রো: সি #। নেট ডেভস থেকে কমফোর্টেবল
    • প্রো: কোনও আইডিই / ওয়ার্কস্টেশন / সার্ভারের প্রয়োজনীয়তা নেই - এটি নিজে ওয়েব অ্যাপে অন্তর্ভুক্ত করে
    • কন: এসএএসএস / কম্পাসের বহুমুখিতা পাওয়া যায় নি এবং সর্বদা সর্বশেষ লেআসইএস জিন্সের সিনট্যাক্স সামঞ্জস্যতার গ্যারান্টি দিতে পারে না
  • সাস: ভার্চুয়ালাইজ লিনাক্স + রুবি [ভ্যাগ্র্যান্ট] [9] এর সাথে
    • প্রো: আপনার মনে হতে পারে সেটআপের জন্য এতটা ভয়ঙ্কর নয়
    • প্রো: দ্রুত !!
    • প্রো: লিনাক্স প্যাকেজ ম্যানেজারের সাথে সর্বশেষতম ফ্রন্টএন্ড সরঞ্জাম (সাস, কম্পাস ইত্যাদি) আপডেট হয়েছে
    • কন: প্রাথমিক-সেটআপ নন-লিনাক্স ব্যবহারকারীদের পক্ষে কঠিন হতে পারে
    • কন: পরিবেশগত প্রয়োজনীয়তা এখন একটি ভিএম হোস্টিং জড়িত
    • কন: ভিএম এর স্কেলিবিলিটি / রক্ষণাবেক্ষণ সংক্রান্ত সমস্যা থাকতে পারে

আমার মতে, [ডটলেসসিএসএস] []] ব্যবহার করে কম ব্যবহার করা আপনার সাধারণ ওয়েব ডেভলপমেন্ট প্রকল্পের জন্য উপরে বর্ণিত কারণগুলির জন্য সেরা পছন্দ।

কয়েক বছর আগে, আমি [ডটলেসসিএসএস] []] কে বিরক্তিকর বাগ এবং সীমাবদ্ধতা পেয়েছি বলে মনে করি, তবে [ডটলেসসিএসএস] []] ব্যবহার করে আবারো কয়েকটি প্রকল্পে, আমি সেটআপটি নিয়ে খুব খুশি। সাস / রুবি ব্যবহার করে আমি আমার বিকাশকারীদের কাছে ব্যথা পরিচয় করিয়েছি না এবং বেশিরভাগ মানই কম ব্যবহার করে পেয়েছি। সর্বোপরি, কোনও আইডিই বা ওয়ার্কস্টেশন প্রয়োজনীয়তা নেই।

[1]: http://sass-lang.com/ [2]: http://compass-style.org/ [3]: http://lesscss.org/ [4]: http: // www। মাইন্ডস্কেএইচকিউ / প্রোডাক্টস / ওয়েবে- ওয়ার্কবেঞ্চ [৫]: http://www.ironruby.net/ []]: http://www.dotlesscss.org/ [7]: http://bundletransformer.codeplex.com / [8]: http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minication-support-asp-net-4-5-series.aspx [9]: http://www.vagrantup.com/


ইন বান্ডেল ট্রান্সফরমার 1.9.81 পরিবর্তনকে কারণে libSass উল্লেখযোগ্যভাবে BundleTransformer.SassAndScss মডিউল কর্মক্ষমতা বাড়ানো হয়েছে।
আন্দ্রে টারিতসিন

আন্দ্রে, আমি কয়েক বছর আগে আপনার নামটি বান্ডেল ট্রান্সফর্মার ব্যবহার করার চেষ্টা করে মনে পড়ে! আমি এটির জন্য একটি নোট যুক্ত করেছি, কারণ এটি কিছু ডেভসদের পক্ষে ভাল।
ফিল রিকিটস

13

আমি সাসকে ভিজ্যুয়াল স্টুডিওতে যাওয়ার উপায় সম্পর্কে স্ক্রিনশট সহ বিশদ নির্দেশাবলী সহ একটি ভিজ্যুয়াল স্টুডিও অ্যাড-ইন লিখেছি wrote এটি এখানে দেখুন - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/


11

এটি SASS নয় তবে আপনি .NET পোর্টের জন্য আমাদের কম CSS ব্যবহার করতে পারেন । যদিও কমপাসটি দেখতে আকর্ষণীয় দেখাচ্ছে এবং আমি মনে করি এর চেয়ে কম কিছু এর জন্য দুর্দান্ত সংযোজন হবে।


5

গতকাল আমি সবেমাত্র এটি পেয়েছি, এটি বেশ আশাব্যঞ্জক দেখাচ্ছে, সাস / এসএসএস বাদে এটি জেএস (এখনও সিএসএস নয়) এর স্বায়ত্তশাসন এবং ফাইলগুলির সংমিশ্রণ পরিচালনা করবে। একটি জিনিস যা আমি আশা করছি তা হ'ল সেখানকার কেউ সাস / এসএসএস ফাইল সম্পাদনা করার জন্য একটি ভিএস প্লাগইন তৈরি করবেন। আমি যে সমস্যাটি পেয়েছি তা হ'ল যখন আপনার সাস / এসএসএস কোডে কোনও ত্রুটি রয়েছে তখন আপনি কেবল এটি উত্পন্ন সিএসএস ফাইলগুলির পরীক্ষা বা নিরীক্ষণ করতে দেখেন। আমি এটির সমস্ত গতি পেরিয়ে দেখিনি, তবে এখনও পর্যন্ত খুব ভাল।

https://github.com/xpaulbettsx/SassAndC کافی


4

আমি এখানে মূলত এই প্রশ্নের উত্তর দিয়েছি ।

#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
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.