Verwendung von Sass in Visual Studio 2013 [geschlossen]

72

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

visual-studio  visual-studio-2013  sass  css-preprocessor 
— Hamed Mayahian
quelle
— Werfen
7
Für VS2013 Update 2 , das sich zum Zeitpunkt des Schreibens in der Community Tech Preview befindet, wurde die SASS-Unterstützung angekündigt .
— Zhaph - Ben Duguid
4
Falls Sie sich fragen , wird diese Frage wird diskutiert auf Meta Stack - Überlauf .
— Lankymart

Antworten:

86

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

— Chris Spittles
quelle
4
Sind Sie sicher, dass es SASS unterstützt? Soweit ich weiß, unterstützt VS2013Update2 nur die SCSS-Syntax und -Kompilierung
— PW Kad
1
Ich stimme zu, es sieht so aus, als würde VS 2013 Update 2 möglicherweise nur SCSS (Sassy CSS) unterstützen. Für die Sass-Anfänger (Syntactically Awesome StyleSheets) ist es jedoch erwähnenswert, dass SCSS eine Syntax (die neueste) für die Verwendung von Sass ist. Sass wird also unterstützt, aber vielleicht nur der neuere SCSS-Syntaxt und nicht die ältere "Sass-Syntax".
— Ola Karlsson
3
Ich habe ein Testprojekt erstellt und eine Datei mit der Erweiterung .SASS (für die alte Syntax) erstellt. Sie erkennt sie nicht und wendet keine Syntaxhervorhebung an. Ich habe versucht, die SASS-Syntax in einer SCSS-Datei zu verwenden. Diesmal werden Kompilierungsfehler angezeigt. Es sieht nicht so aus, als würde es die alte SASS-Syntax unterstützen, aber es unterstützt definitiv das neuere Sassy CSS.
— Chris Spittles
@ PWKad Es scheint nicht die Kompilierung zu unterstützen. Sie benötigen noch ein Plugin eines Drittanbieters dafür
— geedubb
1
Ich habe eine Stunde lang versucht, den alten SASS (im Gegensatz zur neuen SassyCSS-Syntax) ohne Glück kompilieren zu lassen. Eine Sache, die mir geholfen hat, war diese Seite sasstoscss.com, auf der ich den Code in die neuere Syntax konvertiert habe. Ich wünschte, mindestens eines der Plugins würde die alte Syntax weiterhin unterstützen.
— Dan M
53

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:

— Gerber
quelle
@akatakritos nur um dich wissen zu lassen, dass ich dein Blog mit diesem Beitrag verlinkt habe.
— Tanner
Wie gehen Sie mit Ordnerstrukturen um, in denen Mixins und andere stärker komponierte SCSS-Dateien vorhanden sind, die jedoch alle mithilfe der VS2013 + WebEssentials-Unterstützung in den Hauptscss kompiliert werden?
— Thiago Silva
2
Web Essentials funktioniert bei mir nicht. Manchmal funktioniert es, manchmal scheint es SCSS-Kompilierungsfehler zu geben, aber es werden keine Meldungen angezeigt.
— Ethan Reesor
2
Web Essentials für VS2013 unterstützt die SASS-Transpilation. Ich verwende die neueste Version 2.6.36. Ich glaube, der Support wurde nur für die Version 2015 eingestellt.
— Pauloya
1
Unter Verwendung von VS2015, Enterprise Edition, musste ich zuerst [ visualstudiogallery.msdn.microsoft.com/… und dann [ visualstudiogallery.msdn.microsoft.com/… Story: Dann musste ich herunterladen, damit dies alles funktioniert VS2015 neu zu starten, und es hat funktioniert. Ursprünglich konnte nach dem Herunterladen von Web Compiler über NuGet Package Manager und dem Neustart von VS2015 die Datei "compilerconfig.json" nicht geladen / bearbeitet oder zum Stammverzeichnis meines Projekts hinzugefügt werden. Nach dem Herunterladen und Installieren von Web Analyzer hat es funktioniert. Gleicher Autor ...
— Eric Milliot-Martinez
12

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!

— Christin White
quelle
6
Stand März 2014: Dies ist jetzt in Web Essentials VS2013 Update 2 CTP 2
— Nitech
Das Mindscape-Angebot hat mir sehr gut gefallen. Mit meiner neuen PC-Installation kann ich jedoch die Web Essentials ausprobieren.
— Anzeigen
Ich habe Ruby und ein Auto-Processing-Tool für meine Sass-Dateien installiert, als ich vor einiger Zeit ein bisschen Sencha Touch-Arbeit gemacht habe, aber es hat mir nicht wirklich gefallen. Es war zu der Zeit anständig und es hat funktioniert, aber ich möchte, dass alle meine Entwickler an einem Ort arbeiten. VS ist eine so schöne Arbeitsumgebung. Warum also ein externes Verarbeitungswerkzeug verwenden? Wenn Sie Ruby für nichts anderes benötigen, warum sollten Sie es installieren?
— Anzeigen
Wenn Sie Visual Studio wirklich mögen, bleiben Sie auf jeden Fall bei integrierten Lösungen, insbesondere jetzt, wo die Optionen wirklich ausgereift sind. Ich bin jedoch kein großer Fan von VS, daher benutze ich es nur, wenn ich es unbedingt muss. Ich würde lieber eine externe Lösung und Sublime Text verwenden.
— Christin White
5

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 .

— Sam Rueby
quelle
Nach meinem Verständnis wird es weiterhin das Kompilieren von Sass unterstützen. Wurde stattdessen nur der Compiler von Visual Studio verwendet?
— Joseph Woodward
Das glaube ich nicht. Der Autor von Web Essentials (Mads Kristensen) arbeitet für Microsoft und empfiehlt, zu Grunt / Gulp zu wechseln, das seine Tools zum Kompilieren von Sass verwendet (Ruby, richtig?). Die obige Erweiterung bietet also die Möglichkeit, Sass ohne weitere Abhängigkeiten zu kompilieren.
— Sam Rueby
Dies ist bei weitem die beste Antwort auf das Kompilieren von SCSS in Visual Studio. Die Erweiterung funktioniert hervorragend und ist sehr einfach zu installieren.
— Greg Gum
3

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
— Sirwan Afifi
quelle
danke, aber ich denke der Chripydosen't Supprot VS2013?
— Hamed Mayahian
Sind Sie sicher, dass Sie in VS 2013 arbeiten?
— Hamed Mayahian
Ich bin mir nicht sicher über Chripy, aber die zweite Arbeit in VS 2013.
— Sirwan Afifi
2

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.

— PW Kad
quelle
Konnten Sie die Kompassprobleme lösen? Haben Sie auch versucht, Bourbon zu integrieren, und wenn ja, wie gut funktioniert es?
— Jason Frank
1

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.

— David Gebbett
quelle
1

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.

— Luke Puplett
quelle
Nee. Web Essentials kooperiert nicht mit VS2013 Update 2 CTP (2014.04.23), und Update 2 selbst bietet native Unterstützung für SCSS-Dateien.
— Daniel Leiszen
1
UPDATE: WebEssentials 2.0 RC geht mit VS 2013 Update 2
— Daniel Leiszen
0

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

— Serj Sagan
quelle
-3

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.

— user2584621
quelle
In welcher Beziehung steht dies zur Konfiguration von Visual Studio, damit Sass kompiliert werden kann (was die Frage stellt)?
— Cimmanon
Hier geht es nicht darum, Sass im Visual Studio zu kompilieren, es scheint eine Wiederholung der Frage zu sein!
— QMaster
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.