Я ищу способы использования 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 имеет несколько оболочек:
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.
package.jsonи gulpfile.jsвсе это , как правило , требуется , чтобы получить работает в несколько шагов:npm install -g gulp (устанавливает gulp глобально)npm install (устанавливает пакеты проекта локально)gulp taskname (в зависимости от того, как вы настроили имя gulpfile.jsзадачи, будет выполняться задача, которая компилирует ваш SASS, Javascript и т. Д.)У вас есть несколько типичных вариантов рабочего процесса:
Пусть ваши разработчики зафиксируют свой скомпилированный код в репозитории.
Нижняя сторона: разработчики всегда должны запускать 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. Я не прошел через все его шаги, но пока все хорошо.
Я изначально ответил на этот вопрос здесь .
#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