Использование 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, который действительно улучшает работу со всеми интерфейсными материалами. Последняя версия начинает поддерживать 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 .

В проекте compass есть компилятор, который скомпилирует ваш 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 Tooling.
  Многие веб-разработчики сейчас используют Node как платформу для задач фронтенд-разработки. Будь то Grunt, Gulp, JSPM, Webpack или что-то еще - это происходит прямо сейчас в npm .
  Что вы можете делать с пакетами npm:
  • Компилируйте стили с помощью Sass, Less, PostCSS и многих других
  • Объедините шаблоны Javascript, CSS, HTML и др.
  • Напишите другие версии JS и перенесите ES6-7, Typescript, Coffeescript в ES5
  • Создание шрифтов значков из локальных файлов SVG
  • Минимизировать js, css, SVG
  • Оптимизировать изображения
  • Спасите китов
  • ...
• Simpler установка новых разработчиков к проекту
  После того как вы создали свой проект , package.jsonи gulpfile.jsвсе это , как правило , требуется , чтобы получить работает в несколько шагов:
  
  • Скачайте и установите Node.js
  • Выполнить npm install -g gulp (устанавливает gulp глобально)
  • Выполнить npm install (устанавливает пакеты проекта локально)
  • Выполнить gulp taskname (в зависимости от того, как вы настроили имя gulpfile.jsзадачи, будет выполняться задача, которая компилирует ваш SASS, Javascript и т. Д.)
• Поддерживается Visual Studio 2015
  Хотите верьте, хотите нет, но VS2015 теперь может обрабатывать все функции командной строки за вас!

У вас есть несколько типичных вариантов рабочего процесса:

• Пусть ваши разработчики зафиксируют свой скомпилированный код в репозитории.
  Нижняя сторона: разработчики всегда должны запускать gulpили аналогично компилировать готовые к производству активы.

• Серверы сборки | стадии | производства запускают задачи gulp перед выпусками.
  Этот способ может быть более сложным в настройке, но это означает, что работа проверяется и создается заново из некомпилированного источника.

Ниже приведен мой старый ответ 2012 года, сохраненный для потомков:

От ведущего разработчика внешнего интерфейса Project, работающего с Ruby, Python и C # .NET, у меня есть следующие мысли:

Sass & LESS

Я предпочитаю использовать [Sass] [1] в новом проекте, особенно с замечательной [Compass framework] [2]. Компас - это отличная работа, и она очень полезна для меня. У Sass отличное сообщество, хорошая документация и мощный набор функций. Sass - это библиотека Ruby.

Альтернативой Sass является [МЕНЬШЕ] [3]. Он имеет аналогичный синтаксис и функции, но меньшее сообщество и немного лучшая документация. МЕНЬШЕ библиотеки JS.

Что касается тенденций, люди со временем склонны переходить на Sass, поскольку он хорошо разработан и даже поддерживает функции CSS Level 4. Но LESS по-прежнему отлично подходит для использования и легко добавляет ценность, чтобы оправдать его использование.

При использовании Sass / LESS в проекте ASP.NET

Хотя я предпочитаю использовать Sass, заставить Ruby / Sass работать с .NET-проектами может быть болезненно, потому что это сложно настроить, иностранное и может расстроить разработчиков.

У вас есть несколько вариантов:

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

На мой взгляд, МЕНЬШЕ использования [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/

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

Это не SASS, но вы можете взглянуть на наш порт Less Css для .NET . Компас выглядит действительно интересно, и я думаю, что что-то подобное для Less было бы отличным дополнением.

Я только что нашел это вчера, он выглядит довольно многообещающим, помимо 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