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?
Ich habe gestern in HN darüber gelesen und mich gefragt, wie weit verbreitet solche Tools sind
Surya
Ich möchte SASS in unsere Maven-Skripte integrieren. Hat jemand versucht, dies mit dem Maven Ruby-Plugin zu tun?
Christopher Tokar
3
Ich verstehe nicht, wie diese Frage nicht "konstruktiv" ist. Nein, wo in der Frage wird gefragt, ob SASS mit WENIGER (oder irgendetwas anderem) verglichen werden soll. Die folgenden Antworten sind sehr hilfreich für mich, die sehen möchten, welche Optionen zur Verwendung von SASS in .NET bestehen.
Calvin
1
Ich bin auch nicht damit einverstanden, dass dies geschlossen wird. Best Practices in der schnelllebigen Welt der Webentwicklung stammen oft von den Entwicklern selbst und nicht von einem Leitungsgremium!
Phil Ricketts
Antworten:
41
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 .
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).
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.
Gute Zusammenfassung der beiden verfügbaren Optionen.
Angularsen
26
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.
Großartige Arbeit mit Kompass, sieht wirklich toll aus.
Surya
Vielen Dank für die Antwort - ich werde mich morgen
darum
24
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).
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
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.
Andrey, ich erinnere mich an Ihren Namen, als Sie vor ein paar Jahren versucht haben, BundleTransformer zu verwenden! Ich habe einen Hinweis dazu hinzugefügt, da dies für einige Entwickler vorzuziehen ist.
Phil Ricketts
13
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.
Antworten:
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:
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.
quelle
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
quelle
Im Jahr 2015 empfehle ich derzeit
Node.js
(serverseitige Javascript-Plattform) undgulp.js
(ein Task-Runner-Knotenpaket) zusammen mitgulp-sass
(einem Knotenpaket für gulp, das libsass implementiert - einen schnellen C-Port von Ruby SASS).Sie können mit einem solchen Tutorial beginnen .
Hier ist, warum ich denke, dass Sie Node und Gulp verwenden sollten.
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:
Sobald Sie Ihr Projekt eingerichtet haben
package.json
undgulpfile.js
nur noch ein paar Schritte ausgeführt werden müssen, um es zum Laufen zu bringen:npm install -g gulp
(installiert gulp global)npm install
(installiert Projektpakete lokal)gulp taskname
(Abhängig davon, wie Sie Ihrengulpfile.js
Aufgabennamen eingerichtet haben, wird eine Aufgabe ausgeführt, die Ihren SASS, Javascript usw. kompiliert.)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
gulp
oder ähnlich ausgeführt werden, um produktionsbereite Assets zu kompilierenAuf 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:
quelle
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/
quelle
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.
quelle
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
quelle
Ich antwortete ursprünglich diese Frage hier .
quelle