Wie kann ich den Sass CSS-Präprozessor in Visual Studio 2013 verwenden ? Gibt es Erweiterungen, die Sass unterstützen?

Visual Studio 2013 Update 2

Visual Studio 2013 Update 2 bietet native Syntaxunterstützung für SCSS- und LESS-Dateien. Sie können SCSS- oder WENIGER-Dateien erstellen und Syntaxhervorhebungen und Intellisense für diese Dateitypen anzeigen. Es bietet jedoch keine Methode zur Kompilierung.

Hier ist ein Link zum Blog, der die neuen Funktionen erklärt:

Wir haben WENIGER in VS2013 RTM hinzugefügt und haben jetzt ein SASS-Projektelement und einen Editor. Die Funktionen des SASS-Editors sind mit denen des WENIGER-Editors vergleichbar. Dazu gehören Kolorierung, Variable und Mixins IntelliSense, Kommentar / Kommentar, schnelle Informationen, Formatierung, Syntaxvalidierung, Gliederung, Goto-Definition, Farbauswahl, Einstellung der Werkzeugoptionen usw.

Bitte beachten Sie: Dieses Update scheint nur die neuere SassyCSS-Syntax zu unterstützen. Ich habe versucht, es mit der älteren eingerückten SASS-Syntax zum Laufen zu bringen, ohne Erfolg.

Zusammenstellung

• Web Essentials . Dies ist ein großartiges Tool, das das ganze "Grunzen" für Sie erledigt. Neuere Versionen von Web Essentials sind für Visual Studio 2013 Update 3, 4 und 5 verfügbar.
• Eine weitere kostenlose Version , die nur die Kompilierung übernimmt, ist CompileSASS. Dies funktioniert auch in VS2015.
• Alternativ können Sie auch die WebWorkbench von MindScape verwenden , ein großartiges Tool mit vielen nützlichen Funktionen. Es gibt eine kostenlose Version, die gerade genug ist, um durchzukommen, aber es gibt auch eine kostenpflichtige Version, die weitaus umfassender ist (aber meiner Meinung nach etwas zu teuer, wenn man bedenkt, dass es eine bessere kostenlose Alternative gibt).

Visual Studio 2015

Für diejenigen unter Ihnen, die zu Visual Studio 2015 wechseln, gibt es leider noch keine native Unterstützung für die SASS- und WENIGER-Kompilierung. Und leider unterstützt Web Essentials auch die Kompilierung nicht mehr . Der Autor des Buches Web Essentials (Mads Kristensen) erklärt den Grund für diese Entscheidung hier .

Hier ist eine Liste von Erweiterungen, die die Kompilierung übernehmen können:

WebCompiler (KOSTENLOS)

Mads Kristensen (der Autor von Web Essentials) hat ein eigenständiges Kompilierungswerkzeug namens Web Compiler erstellt . Sie müssen es nur installieren, dann mit der rechten Maustaste auf eine der SASS-Dateien klicken, die Sie kompilieren möchten, und Web Compiler> Datei kompilieren auswählen. Ab diesem Zeitpunkt wird es überwacht und jedes Mal, wenn es gespeichert wird, wird die Datei kompiliert.

Laden Sie den Web Compiler herunter

CompileSASS (KOSTENLOS)

Ähnlich wie bei Web Compiler handelt es sich um eine eigenständige Erweiterung, die sowohl für VS2013 als auch für VS2015 erstellt wurde, da die Kompilierung aus der beliebten Web Essentials-Erweiterung entfernt wurde. Es ist leicht und macht den Job sehr gut mit großartiger Fehlerberichterstattung. Lesen Sie den Blog des Autors über die Erweiterung hier .

Laden Sie Compile SASS herunter

Web Workbench (KOSTENLOS / BEZAHLT)

Die Web Workbench von Mindscape war viele Jahre lang meine Lieblingserweiterung beim Kompilieren von SASS, aber seitdem habe ich mich für die kostenlosen Alternativen entschieden. Trotzdem ist die Pro-Version ein leistungsstarkes Tool mit vielen Möglichkeiten zum Anpassen der ausgegebenen Dateien, aber es ist auch ziemlich teuer (39 US-Dollar), wenn man bedenkt, dass es kostenlose Tools gibt.

Laden Sie Web WorkBench herunter

Visual Studio-Code

Das gleiche Angebot wie oben, es bietet native Unterstützung für SASS und LESS durch Syntaxhervorhebung und Intellisense, es fehlt jedoch die Kompilierung.

Jeder der oben beschriebenen Compiler funktioniert, aber wenn Sie die Kompilierung manuell einrichten möchten, finden Sie hier eine brillante Anleitung:

https://code.visualstudio.com/Docs/languages/css

Für alle anderen, die eine Antwort darauf suchen, poste ich, um Ihnen Zeit zu sparen, da einige der Antworten etwas veraltet sind.

Während ich in Visual Studio 2013 an einem kleinen Webprojekt arbeitete, wollte ich SASS zum ersten Mal verwenden. Ich habe ein bisschen gegraben und festgestellt, dass VS 2013 Update 2 mit nativer Unterstützung für SASS ( .scss) -Dateien veröffentlicht wurde.

Nach ein wenig mehr Graben und ohne Erfahrung mit SASS habe ich Web Essentials 2013 für Update 2 installiert , das zum Kompilieren und Generieren der entsprechenden .cssDateien verwendet wird.

Trotzdem war mir nicht klar, wie alles zusammen hängt, aber dieser Blog-Beitrag hat großartige Arbeit geleistet, um alles für einen ersten Timer zu erklären.

Ausschnitte aus dem Blog (Gutschrift an @akatakritos)

1. Visual Studio 2013 bietet die Möglichkeit, SASS-Dateien hinzuzufügen ( .scss)
2. Installieren Sie Web Essentials 2013 für Update 2
3. Fügen Sie .scssIhrem Projekt eine neue Datei hinzu, zstyles.scss
4. Aktualisieren styles.scss, speichern und es wird automatisch eine styles.cssDatei unter der .scssDatei generiert
5. Sie können es dann wie eine normale .cssDatei bündeln oder verknüpfen

UPDATE Juli 2015:

In einem späteren Web Essentials-Update , nämlich: Version 2.5 für Update 4, 12. November 2014, wurde der SASS-Compiler entfernt.

Alternative Compiler:

• SassyStudio
• Web Workbench
• Web Compiler bietet nur Unterstützung für VS2015

Ich habe Chripy nicht verwendet, aber es gibt noch einige andere Optionen, die Sie ausprobieren können.

1. Meine Lieblingserweiterung für die Arbeit mit Sass in Visual Studio ist die Web Workbench von Mindscape . Es ist gut integriert, funktioniert mit Visual Studio 2013 und unterstützt sogar Compass. Wenn Sie Less oder CoffeeScript verwenden, werden diese ebenfalls berücksichtigt. Ich habe mich auch mit einem der Entwickler unterhalten und er war sehr reaktionsschnell und freundlich, was ein großes Plus in meinem Buch ist. Oh, und ich höre, dass noch mehr coole Dinge in Arbeit sind.
2. SassyStudio ist eine andere Möglichkeit, aber es schien nicht so leistungsfähig wie Web Workbench zu sein, als ich es ausprobierte.
3. Es ist noch nicht erschienen, aber behalten Sie Web Essentials im Auge . Im Moment unterstützt es nur WENIGER in Bezug auf CSS-Präprozessoren, aber der Sass-Support hat eine Menge Anfragen erhalten und der Programmmanager antwortete, dass "die Entwicklung auf Hochtouren läuft". Hoffentlich bald!

Die letzte Option und die, auf die ich häufig zurückgreife, besteht darin, meine SASS-Dateien mit einem externen Tool zu überwachen, sie im Hintergrund zu kompilieren und Visual Studio die CSS-Dateien beim Kompilieren neu laden zu lassen.

Die Installation von Ruby und SASS über die Befehlszeile und die Anweisung, Ihr Projektverzeichnis auf Änderungen zu überwachen, funktioniert einwandfrei - aber ich liebe Prepros für diese Art von Dingen.

Ich habe sie nicht alle ausprobiert, aber Scout , Koala , LiveReload , Compass.app und Fire.app sind ähnliche Optionen.

Dies sind zwar nicht immer die richtigen Lösungen für jedes Projekt, sie bieten Ihnen jedoch viel Flexibilität und Reife, die Sie in Visual Studio-Erweiterungen noch nicht unbedingt finden.

Ich hoffe das hilft!

Installieren Sie die CompileSass Visual Studio-Erweiterung, um SCSS in Visual Studio zu kompilieren .

Leider wird Web Essentials das Kompilieren von Sass nicht mehr unterstützen .

Ich fand das ziemlich traurig, weil es absolut der einfachste Weg war, Sass aus Visual Studio zu kompilieren. Ich habe eine neue Visual Studio-Erweiterung erstellt, die sich genauso verhält. Sie installieren einfach die Erweiterung und sie kompiliert beim Speichern automatisch .scss-Dateien in komprimierte .min.css-Dateien.

Schauen Sie sich CompileSass an .

Für ASP.NET gibt es verschiedene Möglichkeiten, sich in SASS zu integrieren. Chripy ist ein gängiges Plug-In. Dies ist etwas, das Sie als Erweiterung in Visual Studio installieren möchten.
und somit Kompilierung entwerfen, können Sie mehr über chripy in herauszufinden http://chirpy.codeplex.com/ ,
sowie es ein weiteres Paket ist , dass Sie über Nuget installieren:

install-package SassAndCoffee

Ich habe einen Blog-Beitrag zu diesem Thema geschrieben, von dem ich glaube, dass er anderen helfen kann. Grundsätzlich wird SCSS unterstützt, jedoch nicht die SASS-Erweiterung.

http://pwkad.wordpress.com/2014/05/30/using-scss-in-visual-studio-2013-with-web-essentials-starring-compass-and-susy/

Seien Sie auch vorsichtig, da ich auf einige Probleme beim Kompilieren von Compass gestoßen bin, z. B. in der Datei compass / css3 / images, bei der Fehler aufgetreten sind.

Mein Kommentar ist wahrscheinlich nutzlos, da die Leute vielleicht bereits eine Antwort haben, aber Scout ist für Windows verfügbar :), das ich seit März 2013 in meinen Projekten verwende.

Sie könnten Mixture verwenden, das sehr leistungsfähig ist und eine verkleinerte Version Ihrer CSS- und JS-Dateien erstellt.

Ich denke, dass die Web Essentials-Erweiterung - von der ich annehmen würde, dass jeder Webentwickler ausgeführt wird und eine Art Vorläufer der nativen VS IDE-Unterstützung ist - SCSS-Kompilierungsunterstützung bietet, aber ich denke, dass sie nur mit VS2013 Update 2 funktioniert, das sich noch in CTP befindet diesmal.

Letzte Version von Visual Studio + letzte Version von Web Essentials http://vswebessentials.com/download ermöglicht die sofortige Verwendung von Sass und Less.

Wenn Sie haben MVC 6, könnten Sie einfach verwenden gulp. Originalquelle hier: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

Fügen Sie die NPMAbhängigkeiten hinzu in package.json:

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "3.8.11",
    ...
    "gulp-sass": "2.2.0",
  },
  "dependencies": {
    "gulp-sass": "^2.2.0"
  }
}

Dann in gulpfile.js:

var gulp = require("gulp"),
    ...
    sass = require("gulp-sass");


paths.js = paths.webroot + "js/**/*.js";
...
paths.sass = paths.webroot + "css/**/*.scss";
paths.cssOutput = paths.webroot + "css";


gulp.task('sass', function () {
    gulp.src(paths.sass)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.cssOutput));
});

Schließlich wird in der Task Runner Explorer, right-clickauf Ihre neue Aufgabe sassdann Bindingswählen Sie dannAfter Build

In Visual Studio 2013 SP 4 ist es kein Problem, bei jedem Speichern eine SCSS-Datei hinzuzufügen und zu synchronisieren. Ich war verwirrt, als die Synchronisierung fehlschlug. Ich stellte fest, dass das Problem darin bestand, eine Variable zu verwenden, bevor sie definiert wurde. Die SCSS-Datei zeigt keinen Fehler an, aber die Synchronisierung schlägt fehl.

Dies funktioniert für die Synchronisierung:

$body-main: 45px;
body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}

Dies funktioniert nicht für die Synchronisierung

body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}
$body-main: 45px;

Im zweiten Fall gibt es keine Fehler und Intellisense funktioniert, aber die Synchronisierung schlägt fehl.