Использование SASS с ASP.NET

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

Каковы наилучшие способы интеграции? Кроме того, существуют ли другие инструменты генерации CSS, которые лучше подходят для среды .NET?

Ответы

Ответ 1

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

Затем, чтобы скомпилировать ваши .sass/.scss файлы в вашем проекте ASP.NET, есть несколько разных инструментов: через Web Essential, Web Workbench, SassC, Sass.Net, Compass, SassAndCoffee...

Веб-Essential полнофункциональный плагин для Visual Studio, который действительно дает лучший опыт для всех Front-End питания. Последняя версия начинает поддерживать Sass (синтаксис SCSS). Внутри он использует Libsass для компиляции SCSS в CSS.

Web Workbench - еще один плагин для Visual Studio, который добавляет подсветку синтаксиса, intellisence и некоторые другие полезные материалы для редактирования SCSS файлы. Он также может скомпилировать ваш код в обычный или миниатюрный CSS. Внутри он использовал завернутую версию компилятора Ruby Sass.

Sassy Studio: еще один плагин для Visual Studio. Меньше признакам, но гораздо легче.

Библиотека Libsass - это порт С++ прекомпилятора CSS Sass (все еще находится в разработке). Оригинальная версия была написана на 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.

Ответ 2

В проекте компаса есть компилятор, который скомпилирует ваш sass для css. Он построен для работы в окнах, но на этой платформе он не тестирован. Если вы найдете ошибки, связанные с платформой, я с радостью помогу вам их исправить.

Компас можно найти здесь: http://github.com/chriseppsein/compass

Ответ 3

В 2015 году, мой текущий совет заключается в использовании Node.js (серверной платформы Javascript) и gulp.js (пакет задач node), а также gulp-sass (пакет node для 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
    • Minify js, css, SVG
    • Оптимизация изображений
    • Сохранить китов
    • ...
  • Упрощенная настройка для новых разработчиков в проект
    После того, как вы настроили проект package.json и gulpfile.js, все, что обычно требуется для запуска, - это несколько шагов:
    • Загрузите и установите Node.js
    • Запустите npm install -g gulp (устанавливает gulp глобально)
    • Запустите npm install (локально устанавливает пакеты проекта)
    • Запустить gulp taskname (в зависимости от того, как вы настроили свое имя gulpfile.js, будет выполняться задача, которая компилирует ваш SASS, Javascript и т.д.)
  • Поддерживается Visual Studio 2015
    Верьте или нет, VS2015 теперь может обрабатывать все файлы командной строки для вас!

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

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

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

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

От ведущего разработчика проекта, работающего с Ruby, Python, и С#.NET, у меня есть эти мысли:

Sass и LESS

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

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

Тренд, люди склонны двигаться в направлении Сасса со временем, так как это хорошо развитые, даже поддерживающие функции CSS уровня 4. Но МЕНЬШЕ все еще отлично подходит для использования и легко добавляет достаточную ценность, чтобы гарантировать использование он.

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

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

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

  • Sass: Native Ruby + Sass
    • Pro: Самая быстрая компиляция сервера
    • Pro: Возможность использования последних версий Sass
    • Con: Массивные проблемы, возникающие при запуске и запуске
    • Кон: Каждый сервер или рабочая станция нуждается в настройке ruby ​​
    • Con:. Уверенно для разработчиков .NET для решения проблем с Ruby/Integration.
  • Sass: порт Ruby.NET, такой как [IronRuby] [5] + Sass
    • Pro: Компиляция сервера SLOW (Frontend Devs будет жаловаться!)
    • Pro: Возможно, не смогут использовать последние версии Sass
    • Pro: Немного легче настроить, чем Native Ruby.
    • Кон: Каждый сервер или рабочая станция нуждается в настройке ruby ​​
    • Con:. Уверенно для разработчиков .NET для решения проблем с Ruby/Integration.
  • Sass: Extend [.NET Bundling] [8] с [BundleTransformer] [7] + Sass
    • Pro: (использует IronRuby) Компиляция сервера SLOW (Frontend Devs будет жаловаться!)
    • Pro: (использует IronRuby) Возможно, вы не сможете использовать последние версии Sass
    • Pro: (использует IronRuby) Немного проще настроить, чем Native Ruby.
    • Кон: Каждый сервер или рабочая станция нуждается в настройке ruby ​​
    • Con:. Уверенно для разработчиков .NET для решения проблем с Ruby/Integration.
  • Sass или LESS: плагин Visual Studio, такой как [Mindscape Workbench] [4]
    • Pro: Легко начать
    • Pro: Быстрая компиляция
    • Con: Каждый разработчик, работающий с стилями Sass, нуждается в плагине IDE
    • Кон: Невозможно быстро изменить стили на сервере - требуется локальная переработка
  • МЕНЬШЕ: порт .NET, такой как [DotLessCSS] [6]
    • Pro: Быстрая компиляция сервера
    • Pro: Очень простая настройка
    • Pro: Удобный для разработчиков С#.NET
    • Pro: Нет требований к IDE/рабочей станции/серверу - укажите его в самом веб-приложении
    • Con: Не обладает универсальностью SASS/Compass и не всегда может гарантировать последнюю совместимость синтаксиса LESS.JS.
  • Sass: Virtualize linux + Ruby с [Vagrant] [9]
    • Pro: Не так страшно настроить, как вы думаете.
    • Pro: Быстро!!
    • Pro: Последние инструменты Frontend (Sass, Compass и т.д.), обновленные с помощью менеджера пакетов linux
    • Con: Первоначальная установка может быть трудной для пользователей, не связанных с linux
    • Con: Требования к окружающей среде теперь включают в себя размещение виртуальной машины
    • 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/

Ответ 4

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

Ответ 5

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

Ответ 6

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

https://github.com/xpaulbettsx/SassAndCoffee

Ответ 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