104

ASP.NET 環境で Ruby HAML パッケージからSASS (Syntactically Awesome StyleSheets)を使用する方法を検討しています。理想的には、SASS ファイルの CSS へのコンパイルがビルド プロセスのシームレスな部分になるようにしたいと考えています。

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

4

7 に答える 7

42

Visual Studio での作業エクスペリエンスを向上させるために、 Sass (SCSS 構文) のサポートを開始しているWeb Essentialの最新バージョンをインストールできます。または、 Sassy StudioまたはWeb Workbench
をインストールすることもできます。

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

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

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

Sassy Studio : Visual Studio 用の別のプラグイン。機能は少ないですが、はるかに軽量です。

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

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

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

Compassは Sass のフレームワークであり、多くの便利なヘルパー (画像スプライトなど) を追加し、SCSS/Sass をコンパイルすることもできます。ただし、スタイルをコンパイルする必要がある各開発環境に Ruby をインストールする必要があります。

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

于 2012-01-24T03:49:44.317 に答える
26

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

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

于 2009-04-28T15:11:28.997 に答える
13

VisualStudioでSassを使用する方法のスクリーンショットを含む詳細な手順を含むVisualStudioアドインを作成しました。ここでそれをチェックしてください-http: //giri.sh/2011/01/21/sass-for-visual-studio-2010/

于 2011-01-21T15:51:10.280 に答える
11

SASSではありませんが、Less Cssfor.NETポートをご覧ください。コンパスは本当に面白そうですが、Lessのこのようなものは素晴らしい追加になると思います。

于 2009-10-17T10:39:23.653 に答える
5

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

https://github.com/xpaulbettsx/SassAndCoffee

于 2011-07-07T17:04:25.207 に答える
4

私は最初にこの質問に答えましたここ.

#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
于 2009-10-17T10:52:41.003 に答える