Verwenden von SASS mit ASP.NET [geschlossen]

Ich suche nach Möglichkeiten, SASS (Syntactically Awesome StyleSheets) aus dem Ruby HAML-Paket in einer ASP.NET-Umgebung zu verwenden. Idealerweise möchte ich, dass die Kompilierung von SASS-Dateien in CSS ein nahtloser Bestandteil des Erstellungsprozesses ist.

Was sind die besten Wege zu dieser Integration? Gibt es alternativ andere Tools zur CSS-Generierung, die für eine .NET-Umgebung besser geeignet sind?

Für eine bessere Arbeitserfahrung in Visual Studio können Sie die letzte Version von Web Essential installieren, die Sass (SCSS-Syntax) unterstützt.
Alternativ können Sie Sassy Studio oder Web Workbench installieren .

Um Ihre .sass / .scss-Dateien in Ihrem ASP.NET-Projekt zu kompilieren, stehen verschiedene Tools zur Verfügung: über Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential ist ein voll funktionsfähiges Plugin für Visual Studio, das wirklich eine bessere Erfahrung für alle Front-End-Inhalte bietet. Die neueste Version unterstützt ab sofort Sass (SCSS-Syntax). Intern wird der Libsass zum Kompilieren des SCSS zu CSS verwendet.

Web Workbench ist ein weiteres Plugin für Visual Studio, das Syntaxhervorhebung, Intelligenz und einige andere nützliche Dinge zum Bearbeiten von SCSS-Dateien hinzufügt. Es kann Ihren Code auch in normales oder minimiertes CSS kompilieren. Intern wurde eine verpackte Version des Ruby Sass-Compilers verwendet.

Sassy Studio : ein weiteres Plugin für Visual Studio. Weniger ausgestattet, aber viel leichter.

Die Libsass-Bibliothek ist der C ++ - Port des Sass CSS-Precompilers (befindet sich noch in der Entwicklung). Die Originalversion wurde in Ruby geschrieben, aber diese Version ist für Effizienz und Portabilität gedacht. Diese Bibliothek ist leicht, einfach und leicht zu erstellen und in eine Vielzahl von Plattformen und Sprachen zu integrieren.

In der Libsass-Bibliothek gibt es mehrere Wrapper:

• SassC : Ein Befehlszeilen-Compiler (unter Windows müssen Sie die Quelle von SassC mit MsysGit kompilieren, um die Datei sassc.exe abzurufen).
• NSass : ein .Net-Wrapper.
• Node-Sass : um Libsass auf Node.js zu verwenden.
• etc.

Compass ist ein Framework für Sass, das viele nützliche Helfer (wie das Spriting von Bildern) hinzufügt und auch Ihr SCSS / Sass kompilieren kann. Sie müssen Ruby jedoch in jeder Entwicklungsumgebung installieren, in der Sie Ihre Stile kompilieren müssen.

SassAndCoffee ist ein Paket, das über einige DLLs und Konfigurationen Unterstützung für die Kompilierung und Minimierung von SCSS / Sass bietet. Der Vorteil gegenüber dem Web Workbench-Compiler besteht darin, dass er in Ihrer Visual Studio-Lösung enthalten ist: Sie müssen nicht in jeder Entwicklungsumgebung ein Plugin installieren. Anmerkung: SassAndCoffee wird nicht oft aktualisiert. Da IronRuby zum Umschließen des offiziellen Ruby-Compilers verwendet wird, können einige Leistungsprobleme auftreten. Sie können die neueste Version über ein Nuget-Paket installieren.

Das Kompassprojekt verfügt über einen Compiler, der Ihren Sass zu CSS kompiliert. Es wurde für die Ausführung unter Windows entwickelt, ist jedoch auf dieser Plattform nicht gut getestet. Wenn Sie plattformbezogene Fehler finden, helfe ich Ihnen gerne, diese zu beheben.

Compass finden Sie hier: http://github.com/chriseppsein/compass

Im Jahr 2015 empfehle ich derzeit Node.js(serverseitige Javascript-Plattform) und gulp.js(ein Task-Runner-Knotenpaket) zusammen mit gulp-sass(einem Knotenpaket für gulp, das libsass implementiert - einen schnellen C-Port von Ruby SASS).

Sie können mit einem solchen Tutorial beginnen .

Bundling bevorzugen? Bundle Transformer verwendet jetzt endlich libsass und ermöglicht so eine schnelle Kompilierung.

Hier ist, warum ich denke, dass Sie Node und Gulp verwenden sollten.

• Node ist jetzt für Frontend-Tools beliebt
  Viele Webentwickler verwenden Node jetzt als Plattform für Frontend-Webentwicklungsaufgaben. Ob Grunt, Gulp, JSPM, Webpack oder etwas anderes - es passiert gerade in npm .
  Dinge, die Sie mit npm-Paketen tun können:
  • Kompilieren Sie Stile mit Sass, Less, PostCSS und vielen mehr
  • Verketten Sie Javascript, CSS, HTML-Vorlagen und mehr
  • Schreiben Sie andere Versionen von JS und übertragen Sie ES6-7, Typescript, Coffeescript auf ES5
  • Erstellen Sie Iconfonts aus lokalen SVG-Dateien
  • Minimieren Sie js, css, SVG
  • Bilder optimieren
  • Rettet die Wale
  • ...
• Einfachere Einrichtung für neue Entwickler für ein Projekt
  Sobald Sie Ihr Projekt eingerichtet haben package.jsonund gulpfile.jsnur noch ein paar Schritte ausgeführt werden müssen, um es zum Laufen zu bringen:
  
  • Laden Sie Node.js herunter und installieren Sie es
  • Lauf npm install -g gulp (installiert gulp global)
  • Ausführen npm install (installiert Projektpakete lokal)
  • Ausführen gulp taskname (Abhängig davon, wie Sie Ihren gulpfile.jsAufgabennamen eingerichtet haben, wird eine Aufgabe ausgeführt, die Ihren SASS, Javascript usw. kompiliert.)
• Unterstützt von Visual Studio 2015
  Ob Sie es glauben oder nicht, VS2015 kann jetzt alle Befehlszeilenaufgaben für Sie erledigen!

In Bezug auf den Workflow haben Sie einige typische Optionen:

• Lassen Sie Ihre Entwickler ihren kompilierten Code in das Repository übertragen.
  Nachteil: Entwickler müssen immer gulpoder ähnlich ausgeführt werden, um produktionsbereite Assets zu kompilieren

• Auf Ihren Build | Stage | Production-Servern werden vor der Veröffentlichung Gulp-Aufgaben ausgeführt.
  Diese Einrichtung kann komplizierter sein, bedeutet jedoch, dass die Arbeit validiert und frisch aus nicht kompilierten Quellen erstellt wird.

Unten ist meine alte Antwort aus dem Jahr 2012, die für die Nachwelt aufbewahrt wird:

Von einem projektführenden Frontend-Entwickler, der mit Ruby, Python und C # .NET arbeitet, habe ich folgende Gedanken:

Sass & WENIGER

Ich bevorzuge es, [Sass] [1] für ein neues Projekt zu verwenden, insbesondere mit dem wunderbaren [Compass-Framework] [2]. Kompass ist eine großartige Arbeit und bringt viel Wert in meinen Prozess. Sass hat eine großartige Community, eine gute Dokumentation und einen leistungsstarken Funktionsumfang. Sass ist eine Ruby-Bibliothek.

Eine Alternative zu Sass ist [WENIGER] [3]. Es hat eine ähnliche Syntax und Funktionen, aber eine kleinere Community und eine etwas bessere Dokumentation. WENIGER eine JS-Bibliothek.

In Bezug auf den Trend tendieren die Leute dazu, sich im Laufe der Zeit in Richtung Sass zu bewegen, da es gut entwickelt ist und sogar CSS Level 4-Funktionen unterstützt. WENIGER ist jedoch immer noch perfekt verwendbar und bietet leicht genug Wert, um die Verwendung zu rechtfertigen.

Zur Verwendung von Sass / LESS in einem ASP.NET-Projekt

Während ich Sass bevorzuge, kann es schmerzhaft sein, Ruby / Sass für die Arbeit mit .NET-Projekten zu gewinnen, da es schwierig einzurichten ist, fremd ist und Entwickler frustrieren kann.

Sie haben einige Möglichkeiten:

• Sass: Native Ruby + Sass
  • Pro: Schnellste Serverkompilierung
  • Pro: Kann die neuesten Versionen von Sass verwenden
  • Con: Massiver Aufwand, um loszulegen
  • Con: Jeder Server oder jede Workstation muss mit Ruby eingerichtet werden
  • Con: Schwieriger für .NET-Entwickler, um Ruby- / Integrationsprobleme zu lösen
• Sass: Ruby .NET-Port wie [IronRuby] [5] + Sass
  • Pro: SLOW Server Compilation (Frontend Devs werden sich beschweren!)
  • Pro: Möglicherweise können die neuesten Versionen von Sass nicht verwendet werden
  • Pro: Etwas einfacher einzurichten als Native Ruby
  • Con: Jeder Server oder jede Workstation muss mit Ruby eingerichtet werden
  • Con: Schwieriger für .NET-Entwickler, um Ruby- / Integrationsprobleme zu lösen
• Sass: Erweitern Sie [.NET Bundling] [8] mit [BundleTransformer] [7] + Sass
  • Pro: (Verwendet IronRuby) SLOW-Serverkompilierung (Frontend-Entwickler werden sich beschweren!)
  • Pro: (Verwendet IronRuby) Möglicherweise können die neuesten Versionen von Sass nicht verwendet werden
  • Pro: (Verwendet IronRuby) Etwas einfacher einzurichten als Native Ruby
  • Con: Jeder Server oder jede Workstation muss mit Ruby eingerichtet werden
  • Con: Schwieriger für .NET-Entwickler, um Ruby- / Integrationsprobleme zu lösen
• Sass oder WENIGER: Visual Studio-Plugin wie [Mindscape Workbench] [4]
  • Pro: Einfach loszulegen
  • Pro: Schnelles Kompilieren
  • Con: Jeder Entwickler, der mit Sass-Stilen arbeitet, benötigt ein IDE-Plugin
  • Con: Stile auf dem Server können nicht schnell geändert werden - erfordert lokale Neuverarbeitung
• WENIGER: .NET-Port wie [DotLessCSS] [6]
  • Pro: Schnelle Serverkompilierung
  • Pro: Sehr einfach einzurichten
  • Pro: Bequem für C # .NET-Entwickler
  • Pro: Keine IDE- / Workstation- / Serveranforderungen - fügen Sie diese in die Web-App selbst ein
  • Con: Hat nicht die Vielseitigkeit von SASS / Compass und kann nicht immer die neueste LESS.JS-Syntaxkompatibilität garantieren
• Sass: Virtualisiere Linux + Ruby mit [Vagrant] [9]
  • Pro: Nicht so schrecklich einzurichten, wie Sie vielleicht denken
  • Pro: Schnell !!
  • Pro: Neueste Frontend-Tools (Sass, Compass usw.), aktualisiert mit dem Linux-Paketmanager
  • Con: Die Ersteinrichtung kann für Nicht-Linux-Benutzer schwierig sein
  • Con: Umgebungsanforderungen umfassen jetzt das Hosten einer VM
  • Con: VM kann Skalierbarkeits- / Wartungsprobleme haben

Meiner Meinung nach ist WENIGER die Verwendung von [DotLessCSS] [6] aus den oben genannten Gründen die beste Wahl für ein typisches Webentwicklungsprojekt.

Vor ein paar Jahren stellte ich fest, dass [DotLessCSS] [6] lästige Fehler und Einschränkungen aufweist, aber wenn ich 2012 bei einigen Projekten wieder [DotLessCSS] [6] verwende, bin ich mit dem Setup sehr zufrieden. Ich habe meinen Entwicklern mit Sass / Ruby keine Schmerzen bereitet und den größten Nutzen aus WENIGER gezogen. Das Beste ist, dass keine IDE- oder Workstation-Anforderungen erforderlich sind.

[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/

Ich habe gerade ein Visual Studio-Add-In mit detaillierten Anweisungen geschrieben, einschließlich Screenshots, wie man Sass für Visual Studio zum Laufen bringt. Überprüfen Sie es hier - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Es ist nicht SASS, aber Sie können sich unseren Less Css for .NET- Port ansehen . Compass sieht allerdings sehr interessant aus, und ich denke, so etwas für Less wäre eine großartige Ergänzung.

Ich habe das erst gestern gefunden, es sieht ziemlich vielversprechend aus, abgesehen von sass / scss wird es die Autominifizierung von JS (noch nicht CSS - und das Kombinieren von Dateien behandeln. Ich hoffe, dass jemand da draußen ein VS-Plugin zum Bearbeiten von sass / scss-Dateien erstellt. Was ich als problematisch empfand, war, dass wenn Sie einen Fehler in Ihrem sass / scss-Code haben, dieser nur beim Testen oder Überprüfen der generierten CSS-Dateien auftritt. Ich habe es nicht auf Herz und Nieren geprüft, aber bisher so gut.

https://github.com/xpaulbettsx/SassAndCoffee

Ich antwortete ursprünglich diese Frage hier .

#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