Використання SASS з ASP.NET [закрито]

Я розглядаю способи використання SASS (Syntactically Awesome StyleSheets) з пакету Ruby HAML в середовищі ASP.NET. В ідеалі я хотів би, щоб компіляція файлів SASS в CSS була бездоганною частиною процесу збирання.

Які найкращі шляхи до цієї інтеграції? Крім того, чи існують інші засоби генерації CSS, які краще підходять для середовища .NET?

Для кращого досвіду роботи в Visual Studio ви можете встановити останню версію Web Essential, яка починає підтримувати Sass (синтаксис SCSS).
Можна також встановити Sassy Studio або Web Workbench .

Потім для компіляції ваших .sass / .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, який додає підсвічування синтаксису, інтелігенцію та деякі інші корисні речі для редагування файлів SCSS. Він також може компілювати ваш код у звичайний або мінімізований CSS. Внутрішня версія використовувала загорнуту версію компілятора Ruby Sass.

Sassy Studio : ще один плагін для Visual Studio. Менш представлений, але набагато легший.

Бібліотека Libsass - це порт C ++ прекомпілятора Sass CSS (ще в розробці). Оригінальна версія була написана на Ruby, але ця версія призначена для ефективності та портативності. Ця бібліотека прагне бути легкою, простою та зручною для побудови та інтеграції з різноманітними платформами та мовами.

Навколо бібліотеки Libsass є кілька обгортків:

• SassC : компілятор командного рядка (для Windows потрібно зібрати джерело SassC з MsysGit, щоб отримати sassc.exe).
• NSass : обгортка .Net
• Node-Sass : використовувати Libsass на Node.js.
• тощо.

Компас Compass - це основа для 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для запуску завдань), а також (пакет вузлів для gulp, що реалізує libsass - швидкий C порт Ruby SASS).

Ви можете розпочати роботу з таким навчальним посібником .

Віддаєте перевагу комплектуванню? Тепер Bundle Transformer нарешті використовує libsass, що забезпечує швидку компіляцію.

Ось чому я думаю, що ви повинні використовувати Node та Gulp.

• Node популярний зараз для інструментів Frontend.
  Багато веб-розробників зараз використовують Node як платформу для завдань веб-розробок. Будь то Grunt, Gulp, JSPM, Webpack чи щось інше - це відбувається прямо зараз у npm .
  Що можна зробити з пакетами npm:
  • Компілюйте стилі за допомогою Sass, Less, PostCSS та багатьох інших
  • Об'єднайте шаблони Javascript, CSS, HTML та багато іншого
  • Напишіть інші версії JS та транспілюйте ES6-7, Typescript, Coffeescript в ES5
  • Створіть піктограми значків з локальних файлів SVG
  • Мінімізуйте js, css, SVG
  • Оптимізуйте зображення
  • Врятуйте китів
  • ...
• Простіша настройка для нових розробників для проекту
  Після того, як ви налаштували проект, package.jsonі gulpfile.jsвсе, що потрібно, щоб розпочати роботу, - це кілька кроків:
  
  • Завантажте та встановіть Node.js
  • Виконати npm install -g gulp (встановити глотком у всьому світі)
  • Запустити npm install (встановлює пакети проектів локально)
  • Виконати gulp taskname (залежно від того, як ви створили gulpfile.jsім'я завдання, буде виконувати завдання, що компілює ваші SASS, Javascript тощо)
• Підтримка Visual Studio 2015
  Вірте чи ні, VS2015 тепер може обробляти всі матеріали командного рядка для вас!

У вас є кілька типових варіантів щодо робочого процесу:

• Попросіть ваших розробників скопіювати свій скомпільований код у сховище
  Даунсайд: Розробники повинні завжди виконувати gulpабо подібні, щоб компілювати активи, готові до виробництва

• Ваш сервер збирання | етап | виробництво виконує завдання gulp перед випусками.
  Цей спосіб може бути складнішим у налаштуванні, але означає, що робота перевірена і побудована свіжою із некомпільованого джерела.

Нижче наведена моя стара відповідь 2012 року, яка зберігається для нащадків:

У керівника проекту Frontend, який працює з Ruby, Python та C # .NET, я маю такі думки:

Sass & менше

Я вважаю за краще використовувати [Sass] [1] для нового проекту, особливо з чудовим [Compass Framework] [2]. Компас - це чудова робота, яка додає великої цінності моєму процесу. Sass має чудову спільноту, документацію на OK та потужний набір функцій. Sass - бібліотека Рубі.

Альтернативою Сассу є [МЕНШЕ] [3]. Він має подібний синтаксис та функції, але менша спільнота та трохи краща документація. Менше бібліотеки JS

Тенденційно, люди, як правило, рухаються у напрямку до Sass з часом, оскільки це добре розвинене, навіть підтримуючи функції CSS рівня 4. Але МЕНШЕ все-таки є ідеально корисним і легко додає достатньої цінності для того, щоб вимагати його використання.

Про використання Sass / LESS у проекті ASP.NET

Хоча я вважаю за краще використовувати Sass, налагодження Ruby / Sass для роботи з проектами .NET може бути болісним, оскільки це важко налаштувати, іноземне та може розчарувати розробників.

У вас є кілька варіантів:

• Sass: Native Ruby + Sass
  • Pro: Найшвидша компіляція сервера
  • Pro: вміє використовувати останні версії Sass
  • Кон: Масивні клопоти вставати і бігати
  • Con: Кожен сервер чи робоча станція потребує налаштування рубіну
  • Con: Складніше для .NET розробників для вирішення проблем Ruby / інтеграції
• Sass: порт Ruby .NET, як [IronRuby] [5] + Sass
  • Про: компіляція сервера SLOW (Frontend Devs поскаржиться!)
  • Pro: Можливо, не вдасться використовувати останні версії Sass
  • Про: налаштування трохи легше, ніж Native Ruby
  • Con: Кожен сервер чи робоча станція потребує налаштування рубіну
  • Con: Складніше для .NET розробників для вирішення проблем Ruby / інтеграції
• Sass: розширення [.NET Bundling] [8] за допомогою [BundleTransformer] [7] + Sass
  • Pro: (Використовує IronRuby) компіляцію серверів SLOW (Frontend Devs поскаржиться!)
  • Pro: (Використовує IronRuby) Можливо, не вдасться використовувати останні версії Sass
  • Pro: (Використовує IronRuby) Налаштування трохи легше, ніж Native Ruby
  • Con: Кожен сервер чи робоча станція потребує налаштування рубіну
  • Con: Складніше для .NET розробників для вирішення проблем Ruby / інтеграції
• Sass або LESS: плагін Visual Studio, як [Mindscape Workbench] [4]
  • Про: Початок роботи
  • Pro: Швидке складання
  • Con: Кожен розробник, який працює зі стилями Sass, потребує плагін IDE
  • Con: Неможливо швидко змінити стилі на сервері - потрібна локальна повторна обробка
• Менше: порт NET, як [DotLessCSS] [6]
  • Pro: Швидка компіляція сервера
  • Pro: Дуже просто налаштувати
  • Pro: Зручний для C # .NET розробників
  • Pro: Ніяких вимог до IDE / робочої станції / сервера - включіть їх у сам веб-додаток
  • Con: Не має універсальності SASS / Compass і не завжди може гарантувати сумісність із синтаксисом LESS.JS
• Sass: віртуалізація linux + Ruby з [Vagrant] [9]
  • Про: Не так жахливо налаштовувати, як ви могли подумати
  • Pro: Швидкий !!
  • Pro: Останні інструменти Frontend (Sass, Compass тощо), оновлені менеджером пакетів Linux
  • Con: Початкова настройка може бути складною для користувачів, які не користуються Linux
  • Con: Екологічні вимоги тепер передбачають розміщення VM
  • Con: VM може мати проблеми зі масштабованістю / обслуговуванням

На мою думку, МЕНШЕ використання [DotLessCSS] [6] є найкращим вибором для вашого типового проекту веб-розробки з причин, зазначених вище.

Пару років тому я виявив, що [DotLessCSS] [6] має набридливі помилки та обмеження, але, використовуючи [DotLessCSS] [6] ще в 2012 році для кількох проектів, я дуже задоволений налаштуванням. Я не заподіяв біль своїм розробникам за допомогою Sass / Ruby і отримаю більшу частину вартості МЕНШЕ. Найкраще, що немає вимог до 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/

Я щойно написав надбудову Visual Studio з детальними інструкціями, включаючи скріншоти, як отримати Sass для Visual Studio. Перевірте це - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Це не SASS, але ви можете поглянути на наш менший Css для .NET- порту. Хоча компас виглядає дуже цікаво, і я думаю, що щось подібне для Менше було б чудовим доповненням.

Я щойно знайшов це вчора, це виглядає досить перспективно, окрім sass / scss він буде працювати з автоматизацією JS (а не CSS - поки що) та комбінуванням файлів. Я сподіваюся, що хтось там створить плагін VS для редагування файлів sass / scss. Те, що я вважав проблематичним, - це те, що у вас є помилка у коді sass / scss, ви виявляєте лише тестування або перевірку створених файлів CSS. Я не проніс це через усі її кроки, але поки що добре.

https://github.com/xpaulbettsx/SassAndCoffee

Я спочатку відповів на це питання тут .

#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