web-dev-qa-db-ja.com

Visual Studio 2013でSassを使用する方法

Visual Studio 201でSass CSSプリプロセッサを使用するにはどうすればよいですか？ Sassをサポートする拡張機能はありますか？

visual-studiovisual-studio-2013sasscss-preprocessor
70
Hamed mayahian

Visual Studio 2013アップデート2

Visual Studio 2013 Update 2には、SCSSファイルとLESSファイルの両方のネイティブ構文サポートがあります。 SCSSまたはLESSファイルを作成し、これらのファイルタイプの構文の強調表示とインテリセンスを確認できます。 ただし、コンパイルの方法は提供されません。

新しい機能について説明しているブログのlinkは次のとおりです。

VS2013 RTMにLESSを追加し、SASSプロジェクトアイテムとエディターを用意しました。 SASSエディターの機能は、LESSエディターに匹敵し、色付け、変数およびMixins IntelliSense、コメント/コメント解除、クイック情報、フォーマット、構文検証、アウトライン、goto定義、カラーピッカー、ツールオプション設定などが含まれます。

注意：このアップデートは、新しいSassyCSS構文のみをサポートしているようです。以前のインデントされたSASS構文で動作するように試みましたが、成功しませんでした。

編集

  • Web Essentials。これは、すべての「うなり声」作業を行う素晴らしいツールです。 Web Essentialsの新しいバージョンは、Visual Studio 2013 Update 3、4、5で利用できます。
  • コンパイルを処理するだけのもう1つの無料のツールはCompileSASSで、これはVS2015でも機能します。
  • あるいは、MindScapeのWebWorkbenchを使用することもできます。これは、多くの素晴らしい機能を備えた素晴らしいツールです。無料で入手できるバージョンがありますが、より包括的な包括的なバージョンもあります（ただし、より良い無料の代替手段があることを考えると、少し高すぎます）。

Visual Studio 2015

残念ながらVisual Studio 2015に移行している方には、残念ながらno SASSおよびLESSコンパイルのネイティブサポートがまだあります。そして残念ながら、Web Essentialsはもはやコンパイルもサポートします。 Web Essentials（Mads Kristensen）の著者は、この決定の理由を説明しています here 。

コンパイルを処理できる拡張機能のリストは次のとおりです。

WebCompiler（FREE）

Mads Kristensen（Web Essentialsの作者）は、 Web Compiler と呼ばれるスタンドアロンのコンパイルツールを作成しました。インストールするだけで、コンパイルするSASSファイルを右クリックして、[Webコンパイラ]> [ファイルのコンパイル]を選択します。その時点から監視され、保存されるたびにファイルがコンパイルされます。

Webコンパイラのダウンロード

CompileSASS（無料）

Web Compilerと同様、これはVS201とVS2015の両方で動作するように作成されたスタンドアロンの拡張機能です。これは、人気のWeb Essentials拡張機能からコンパイルが削除されたためです。それは軽量であり、優れたエラー報告で非常にうまく機能します。拡張機能について著者のブログを読む here 。

コンパイルSASSのダウンロード

Web Workbench（FREE/PAID）

MindscapeのWeb Workbench は、SASSをコンパイルするときに長年にわたって私のお気に入りの拡張機能でしたが、その後、無料の代替機能を支持して移動しました。それでも、Proバージョンは出力ファイルをカスタマイズする多くの方法を備えた強力なツールですが、無料のツールがあることを考えるとかなり高価です（$ 39）。

Web WorkBenchをダウンロード

Visual Studioコード

上記とまったく同じように、構文の強調表示とIntellisenseによるSASSとLESSのネイティブサポートがありますが、コンパイルはありません。

上記で概説したコンパイラーはすべて動作しますが、ここでコンパイルを手動でセットアップしたい場合は、素晴らしいガイドがあります。

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

86
Chris Spittles

これに対する答えを探している他の人のために、私はあなたの時間を節約するために投稿しています。答えのいくつかは少し古くなっています。

Visual Studio 2013で小さなWebプロジェクトに取り組んでいる間に、SASSを初めて使用したいと思いました。掘り下げてみたところ、SASS（.scss）ファイルのネイティブサポートを備えたVS 2013 Update 2がリリースされていることがわかりました。

少し掘り下げた後、SASSの使用経験がなかったため、対応する.cssファイルのコンパイルと生成に使用される Web Essentials 2013 for Update 2 をインストールしました。

それでも、どのように結び付いているのかは明確ではありませんでしたが、 このブログ投稿 は、最初のタイマーのすべてをうまく説明できました。

ブログからの抜粋（@akatakritosへのクレジット）

  1. Visual Studio 2013は、SASSファイル（.scss）を追加する機能を提供します
  2. インストール pdate 2のWeb Essentials 201
  3. 新しい.scssファイルをプロジェクトに追加します。 styles.scss
  4. styles.scssを更新して保存すると、styles.cssファイルの下に.scssファイルが自動生成されます
  5. その後、通常の.cssファイルのようにバンドルまたはリンクできます

2015年7月の更新：

後の Web Essentials update 、つまり：2014年11月12日のUpdate 4のバージョン2.5では、SASSコンパイラーが削除されました。

代替コンパイラー：

52
Tanner

私はChripyを使用していませんが、他にも試すことができるオプションがいくつかあります。

  1. Visual StudioでSassを操作するための私のお気に入りの拡張機能は、Mindscapeの Web Workbench です。 Visual Studio 2013と連携し、コンパスもサポートしています。 LessまたはCoffeeScriptを使用すると、それらも同様に処理されます。私も開発者の1人とおしゃべりをしましたが、彼は本当に敏感でフレンドリーでした。ああ、私はもっとクールなものも作品にあると聞いています。
  2. SassyStudio は別の可能性ですが、試したときはWeb Workbenchほど強力ではなかったようです。
  3. まだ公開されていませんが、 Web Essentials に注目してください。現時点では、CSSプリプロセッサの観点からLESSのみをサポートしていますが、Sassサポートは ton of requests を取得しており、プログラムマネージャーは「開発中のフルスロットル」と答えました。うまくいけばすぐに！

最後のオプションと私が多くの時間を費やしたオプションは、外部ツールを使用してSASSファイルを監視し、バックグラウンドでコンパイルし、Visual StudioにCSSファイルをコンパイル時に再ロードさせることです。

コマンドライン経由でRubyとSASSをインストールし、プロジェクトディレクトリの変更を監視するように指示することは問題なく機能しますが、この種のことは Prepros が大好きです。

Scout 、 Koala 、 LiveReload 、 Compass.app および Fire.app も同様のオプションです。

これらは必ずしもすべてのプロジェクトに適したソリューションではありませんが、Visual Studioの拡張機能には必ずしもない柔軟性と成熟度を提供します。

それがお役に立てば幸いです！

13
Chris White

Visual StudioでSCSSをコンパイルするには、 CompileSass Visual Studio Extensionをインストールします。

残念ながらWeb Essentials Sassのコンパイルはもうサポートされません 。

Visual StudioからSassをコンパイルするのが絶対に最も簡単な方法だったので、これはかなり悲しいと思いました。同じように動作する新しいVisual Studio拡張機能を作成しました。拡張機能をインストールするだけで、保存時に.scssファイルが自動的に圧縮された.min.cssファイルにコンパイルされます。

CompileSass を確認してください。

5
Sam Rueby

aSP.NETの場合、SASSと統合するにはいくつかの方法があります。 Chripy は一般的なプラグインで、これはVisual Studioに拡張機能としてインストールするものです。
したがって設計時のコンパイルでは、 http://chirpy.codeplex.com/ でchripyの詳細を確認できます。
Nugetを介してインストールできる別のパッケージがあります：

install-package SassAndCoffee
3
Sirwan Afifi

このトピックに関するブログ投稿を書いたので、他の人にも役立つかもしれません。基本的にSCSSはサポートされていますが、SASS拡張はサポートされていません。

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

また、compass/css3/imagesファイルなどのコンパスのコンパイルでいくつかの問題が発生したため、エラーが発生していました。

2
PW Kad

Web Essentials拡張機能は、すべてのWeb開発者が実行しており、ネイティブVS IDEサポートの一種であると想定していますが、SCSSコンパイルをサポートしていると思いますが、VS2013 Update 2でのみ機能すると思います現時点ではまだCTPにあります。

1
Luke Puplett

人々はすでに答えを持っているかもしれないので、私のコメントはおそらく役に立たないでしょうが、Scoutは窓で利用可能です:)、私は2013年3月から私のプロジェクトで使用しています。

非常に強力で、CSSファイルとJSファイルの縮小版を作成するMixtureを使用できます。

1
David Gebbett

MVC 6がある場合は、gulpを使用できます。ここに元のソース： http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

package.jsonにNPM依存関係を追加します。

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

次に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));
});

最後に、新しいタスクのTask Runner Explorer、right-clickでsass、次にBindingsを選択し、After Buildを選択します

0
Serj Sagan

Visual Studioの最後のバージョン+ Web Essentialsの最後のバージョン http://vswebessentials.com/download では、SassおよびLessをそのまま使用できます。

0
Donskikh Andrei