SASSをASP.NETで使用する[終了]

101

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

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

asp.net  css  sass 
— ギュムンドゥルH
ソース
私は昨日、HNでこれについて読んでいて、そのようなツールの普及がどれほどあるか疑問に思っていました
— スーリヤ
SASSをMavenスクリプトに統合することを検討しています。誰かがMaven Rubyプラグインを使用してこれを試みましたか？
— クリストファートカール
3
この質問が「建設的」ではないことを理解できません。SASSとLESS（またはその他）を比較するように求められる質問のどこにもありません。以下の回答は、.NETでSASSを使用するためのオプションを確認したい場合に非常に役立ちます。
— Calvin
1
私もこれが閉鎖されていることに同意しません。急速に変化するWeb開発の世界でのベストプラクティスは、多くの場合、管理者ではなく開発者自身からもたらされます。
— Phil Ricketts、2015

回答:

41

Visual Studioでより良い作業体験を得るには、Sass（SCSS構文）をサポートし始めているWeb Essentialの最新バージョンをインストールできます。
または、Sassy StudioまたはWeb Workbenchをインストールすることもできます。

次に、あなたのASP.NETプロジェクトであなたの.sass / .scssファイルをコンパイルするために、いくつかの異なるツールがあります：経由のWebエッセンシャル、ウェブワークベンチ、SassC、Sass.Net、コンパス、SassAndCoffee ...

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

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

Sassy Studio：Visual Studioのもう1つのプラグイン。機能は少ないですが、はるかに軽量です。

Libsassライブラリは（まだ開発中）サス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は頻繁に更新されません。公式のRubyコンパイラをラップするためにIronRubyを使用するため、パフォーマンスの問題が発生する可能性があります。Nugetパッケージから最新バージョンをインストールできます。

— エティエンヌ
ソース
1
利用可能な2つのオプションの良い要約。
— 12
26

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

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

— クリセップシュタイン
ソース
コンパスで素晴らしい仕事、本当に素晴らしいですね。
— スーリヤ
答えてくれてありがとう-私はこの明日に見ていきます
— GuðmundurH
24

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

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

バンドリングを好む？Bundle Transformerがlibsassを使用するようになり、高速コンパイルが可能になりました。

NodeとGulpを使うべきだと思う理由はここにあります。

  • Nodeは現在、フロントエンドツーリングで人気があります。
    多くのWeb開発者がNodeをフロントエンドWeb開発タスクのプラットフォームとして使用しています。それが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 （プロジェクトパッケージをローカルにインストール）
    • 実行gulp taskname （gulpfile.jsタスク名の設定方法に応じて、SASS、Javascriptなどをコンパイルするタスクを実行します）
  • Visual Studio 2015によるサポート
    信じられないかもしれませんが、VS2015はすべてのコマンドラインを処理できるようになりました。

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

  • 開発者にコンパイル済みコードをリポジトリーにコミットさせる
    欠点：開発者は、本番環境にgulp対応したアセットをコンパイルするために、常に実行するか、または同様に実行する必要があります

  • build | stage | productionサーバーはリリース前にgulpタスクを実行します。
    この方法はセットアップが複雑になる可能性がありますが、作業は検証され、コンパイルされていないソースから新しくビルドされます。

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

Ruby、Python、C＃.NETを使用するプロジェクトをリードするフロントエンド開発者から、私はこれらの考えを持っています：

サスとレス

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

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

トレンド的には、CSSレベル4の機能をサポートしているとしても、Sassは十分に開発されているため、時間の経過とともにSassに移行する傾向があります。しかし、LESSは依然として完全に使用可能であり、それを使用するに値する十分な価値を簡単に追加できます。

ASP.NETプロジェクトでのSass / LESSの使用について

私はSassを使用することを好みますが、Ruby / Sassを.NETプロジェクトで動作させるのは苦痛です。なぜなら、セットアップが難しく、外国語であり、開発者を苛立たせる可能性があるからです。

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

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

— フィル・リケッツ
ソース
でバンドルトランス1.9.81への移行に伴うlibSassは大幅BundleTransformer.SassAndScssモジュールの性能を高めてきました。
— Andrey Taritsyn、2015
アンドレイ、私はあなたの名前を数年前にBundleTransformerを使おうとしたことを覚えています！一部の開発者にとっては好ましいので、これに関するメモを追加しました。
— Phil Ricketts
5

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

https://github.com/xpaulbettsx/SassAndCoffee

— ダンドヨン
ソース
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
— イフェルドブラム
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.