web-dev-qa-db-ja.com

ASP.NETでSASSを使用する

ASP.NETのRuby HAMLパッケージから） [〜＃〜] sass [〜＃〜] （構文的に素晴らしいスタイルシート）を使用する方法を探しています理想的には、SASSファイルをCSSにコンパイルして、ビルドプロセスのシームレスな部分にしたいと思います。

この統合に最適な方法は何ですか？または、.NET環境に適した他のCSS生成ツールはありますか？

asp.netcsssass
97
Guðmundur H

Visual Studioの操作性を向上させるには、Sass（SCSS構文）のサポートを開始している Web Essential の最新バージョンをインストールできます。
代わりに Sassy Studio または Web Workbench をインストールすることもできます。

次に、ASP.NETプロジェクトで.sass/.scssファイルをコンパイルするためのいくつかの異なるツールがあります： Web Essential 、 Web Workbench 、 SassC 、 Sass.Net 、 コンパス 、 SassAndCoffee ...

Web Essential Visual Studioの完全な機能を備えたプラグインであり、すべてのフロントエンドスタッフに優れたエクスペリエンスを提供します。最新バージョンはSass（SCSS構文）のサポートを開始しています。内部的には、Libsassを使用してSCSSをCSSにコンパイルします。

Web Workbench は、Visual Studioの別のプラグインであり、SCSSファイルを編集するための構文の強調表示、インテリジェンス、その他の便利な機能を追加します。また、コードを通常のCSSまたは縮小されたCSSにコンパイルできます。内部的には、Ruby Sassコンパイラーのラップされたバージョンを使用しました。

Sassy Studio ：Visual Studioの別のプラグイン。目立たないが、はるかに軽い。

Libsass library は、Sass CSSプリコンパイラ（まだ開発中）のC++ポートです。元のバージョンはRubyで作成されましたが、このバージョンは効率と移植性を目的としています。このライブラリは、軽量でシンプル、そして簡単に構築でき、さまざまなプラットフォームや言語と統合できるよう努めています。

Libsassライブラリにはいくつかのラッパーがあります。

  • SassC ：コマンドラインコンパイラ（Windowsでは、sasssc.exeを取得するには、MsysGitでSassCのソースをコンパイルする必要があります）。
  • NSass ：.Netラッパー。
  • Node-Sass ：Node.jsでLibsassを使用します。
  • 等.

Compass はSassのフレームワークであり、多くの有用なヘルパー（画像の分割など）を追加し、SCSS /サッス。ただし、スタイルをコンパイルする必要がある各開発環境にRubyをインストールする必要があります。

SassAndCoffee は、いくつかのDLLと構成を介して、SCSS/Sassのコンパイルと縮小のサポートを追加するパッケージです。 Web Workbenchコンパイラに対する利点は、Visual Studioソリューションに内蔵されていることです。すべての開発環境にプラグインをインストールする必要はありません。注意：SassAndCoffeeは頻繁に更新されません。IronRubyを使用して公式のRubyコンパイラをラップするため、パフォーマンスの問題が発生する可能性があります。最新バージョンは Nugetパッケージでインストールできます。 。

41
Etienne

Compassプロジェクトには、sassをcssにコンパイルするコンパイラがあります。 Windows上で動作するように構築されていますが、そのプラットフォームでは十分にテストされていません。プラットフォーム関連のバグを見つけたら、喜んで修正します。

コンパスはここにあります： http://github.com/chriseppsein/compass

26
chriseppstein

2015年の私の現在のアドバイスは、Node.js（サーバーサイドJavascriptプラットフォーム）とgulp.js（タスクランナーノードパッケージ）、およびgulp-sass（gulp実装用のノードパッケージlibsass-Ruby SASSの高速Cポート）。

始めることができます このようなチュートリアルで 。

バンドリングを優先しますか？ バンドルトランスフォーマー は最終的にlibsassを使用して、高速コンパイルを可能にします。

NodeとGulpを使用する必要があると思う理由は次のとおりです。

  • ノードは現在、フロントエンドツーリングで人気があります
    多くのWeb開発者が、フロントエンドWeb開発タスクのプラットフォームとしてNodeを使用しています。 Grunt、Gulp、JSPM、Webpack、または他の何かであるかどうか-それは今、 npm で起こっています。
    npmパッケージでできること：
    • Sass、Less、PostCSSなどでスタイルをコンパイルします
    • Javascript、CSS、HTMLテンプレートなどを連結します
    • 他のバージョンのJSとES6-7、TypeScript、CoffeescriptをES5にトランスパイルします
    • ローカルSVGファイルからアイコンフォントを作成する
    • Js、css、SVGを縮小する
    • 画像を最適化する
    • クジラを救う
    • ...
  • プロジェクトへの新規開発者向けのシンプルなセットアップ
    プロジェクトpackage.jsonおよびgulpfile.jsを設定したら、通常、実行に必要な作業はいくつかのステップだけです。
    • ダウンロードしてインストールします Node.js
    • npm install -g gulpを実行（gulpをグローバルにインストール）
    • npm installを実行します（プロジェクトパッケージをローカルにインストールします）
    • Run gulp taskname（gulpfile.js tasknameの設定方法に応じて、SASS、Javascriptなどをコンパイルするタスクを実行します）
  • Visual Studio 2015でサポート
    信じられないかもしれませんが、VS2015はすべてのコマンドラインを処理できるようになりました！

ワークフローに関しては、いくつかの典型的なオプションがあります。

  • 開発者がコンパイルしたコードをリポジトリにコミットするようにします
    欠点：開発者は、常にgulpまたは同様のコマンドを実行して、本番対応のアセットをコンパイルする必要があります

  • あなたのビルド|ステージ|プロダクションサーバーはリリース前にgulpタスクを実行します
    この方法はセットアップがより複雑になる可能性がありますが、作業が検証され、コンパイルされていないソースから新たに構築されることを意味します。

以下は、後世のために保存された2012年の古い回答です。

Ruby、Python、およびC＃.NETで作業するプロジェクトをリードするフロントエンド開発者から、私はこれらの考えを持っています。

サス＆レス

新しいプロジェクトで[Sass] [1]を使用すること、特にすばらしい[Compass framework] [2]を使用することを好みます。コンパスは素晴らしい作品であり、私のプロセスに大きな価値をもたらします。 Sassには素晴らしいコミュニティ、わかりやすいドキュメント、強力な機能セットがあります。 SassはRubyライブラリです。

Sassに代わるものは[LESS] [3]です。構文と機能は似ていますが、コミュニティが小さく、ドキュメントが少し改善されています。 JSライブラリを減らします。

トレンド的には、人々は時間が経つにつれてSassに向かって移動する傾向があります。これはCSSレベル4の機能をサポートすることもあり、よく発達しているためです。しかし、LESSは依然として完全に使用可能であり、使用を保証するのに十分な価値を簡単に追加できます。

ASP.NETプロジェクトでSass/LESSを使用する場合

私はSassを使用することを好みますが、Ruby/Sassを.NETプロジェクトで動作させることは、セットアップが難しく、外国人であり、開発者を苛立たせる可能性があるため、痛みを伴う場合があります。

いくつかのオプションがあります：

  • Sass：ネイティブRuby + Sass
    • Pro：最も速いサーバーコンパイル
    • Pro：Sassの最新バージョンを使用可能
    • Con：立ち上がって実行するための大きな手間
    • Con：すべてのサーバーまたはワークステーションにRuby設定が必要です
    • Con：.NET開発者がRuby /統合の問題を解決するのが難しい
  • Sass：Ruby [IronRuby] [5]のような.NETポート+ Sass
    • Pro：遅いサーバーのコンパイル（フロントエンド開発者は文句を言うでしょう！）
    • Pro：Sassの最新バージョンを使用できない場合があります
    • Pro：ネイティブRubyよりもセットアップが少し簡単
    • Con：すべてのサーバーまたはワークステーションにRuby設定が必要です
    • Con：.NET開発者がRuby /統合の問題を解決するのが難しい
  • Sass：[.NETバンドル] [8]を[BundleTransformer] [7] + Sassで拡張
    • Pro：（IronRubyを使用）SLOWサーバーのコンパイル（フロントエンド開発者は文句を言います！）
    • Pro：（IronRubyを使用）Sassの最新バージョンを使用できない場合があります
    • Pro：（IronRubyを使用）Native Rubyよりもやや簡単なセットアップ
    • Con：すべてのサーバーまたはワークステーションにRuby設定が必要です
    • Con：.NET開発者がRuby /統合の問題を解決するのが難しい
  • SassまたはLESS：[Mindscape Workbench] [4]のようなVisual Studioプラグイン
    • Pro：簡単に始められます
    • Pro：高速コンパイル
    • Con：Sassスタイルを使用するすべての開発者には、IDEプラグインが必要です
    • Con：サーバーのスタイルをすばやく変更できない-ローカルでの再処理が必要
  • LESS：[DotLessCSS] [6]のような.NETポート
    • Pro：高速サーバーコンパイル
    • Pro：セットアップが非常に簡単
    • Pro：C＃.NET開発者にとって快適
    • Pro：IDE /ワークステーション/サーバーの要件なし-Webアプリ自体に含める
    • Con：SASS/Compassの汎用性がなく、常に最新のLESS.JS構文の互換性を保証できない
  • Sass：[Vagrant] [9]でlinux + Rubyを仮想化します。
    • Pro：想像するほどセットアップが恐ろしくありません
    • Pro：高速!!
    • Pro：最新のフロントエンドツール（Sass、Compassなど）、Linuxパッケージマネージャーで更新
    • Con：Linux以外のユーザーにとって初期設定は難しいかもしれません
    • Con：環境要件にVMのホストが含まれるようになりました
    • Con：VMにはスケーラビリティ/メンテナンスの問題がある可能性があります

私の意見では、[DotLessCSS] [6]を使用するLESSは、上記の理由から、典型的なWeb開発プロジェクトに最適です。

数年前、[DotLessCSS] [6]に迷惑なバグと制限があることがわかりましたが、2012年にいくつかのプロジェクトで[DotLessCSS] [6]を再び使用して、セットアップに非常に満足しています。 Sass/Rubyを使用して開発者に苦痛を与えたことはなく、LESSからほとんどの価値を引き出しています。何よりも、IDEまたはワークステーションの要件はありません。

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

24
Phil Ricketts

SassをVisual Studioに移行する方法のスクリーンショットなど、詳細な手順を記載したVisual Studioアドインを作成しました。こちらで確認してください- http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

13
Girish

SASSではありませんが、 Less Css for .NET portをご覧ください。コンパスは本当に面白いように見えますが、Less向けのこのようなものは素晴らしい追加になると思います。

11
Owen

昨日これを見つけたところ、非常に有望に見えます。sass/ scssは別として、JS（まだCSSではない）とファイルの結合の自動縮小を処理します。私が望んでいることの1つは、誰かがsass/scssファイルを編集するためのVSプラグインを作成することです。私が問題を見つけたのは、sass/scssコードにエラーがある場合、生成されたCSSファイルのテストまたは検査を行うだけだということです。私はすべてのペースを試したわけではありませんが、これまでのところ順調です。

https://github.com/xpaulbettsx/SassAndCoffee

5
Dan Doyon

私はもともとこの質問に答えました here 。

#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
4
yfeldblum