web-dev-qa-db-ja.com

.lessファイルでVisual Studio 2010 .css Intellisenseを有効にする方法

誰もが非CSSファイル拡張子でCSSインテリセンスを有効にする方法を知っていますか？基本的に.cssファイルである.lessファイルがありますが、Visual Studioはファイルで.cssインテリセンスを使用しません。

cssvisual-studio-2010visual-studiointellisense
60
aBetterGamer

VS2010のCSS Is Less拡張を使用してみてください。

http://visualstudiogallery.msdn.Microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa992

設定を変更したり、HTMLタグをLESSファイルに追加したりすることなく、CSSエディターで.LESSファイルを強制的に開きます。

43
Luke

Visual Studioでは、[ツール]、[オプション]、[テキストエディター]、[ファイル拡張子]の順に移動して、カスタム拡張子をさまざまなエディターにマップできます。カスタム拡張機能を提供し、関連付けたいエディターを選択するだけです。悲しいことに、Visual StudioチームはエディターのリストでCSSエディターを見落としているようです。

回避策として考えられるのは、拡張機能をHTMLエディターに関連付けてから<html><head><style>はファイルの上部にあり、</style></head></html>ファイルの下部。これにより、タグのセット間でCSSインテリセンスがサポートされます。編集が完了したら、HTMLタグとファイルの関連付けを削除できます。

20
Nick H

別の方法は、ファイルに「.less.css」という名前を付け、マスターページまたはメインのcssファイル（他のすべてのcssファイルを@importステートメントでロードするファイル）でそれらへの参照を変更し、lessを構成することです。 Web.Configファイルの 'handlers'セクションで次のようにハンドラー：

<add name="LessCssHandler" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.LESS.CSS" verb="*" />

次に、構文の強調表示を取得し、あまりうまく機能せず、vsで新しいファイル拡張子を設定したり、vsアドインをロードしたりする必要がありません。これは、複数の開発者のチームがある場合に便利です。

単一のファイルを使用して色などを定義する場合、「。less」という名前を付け、@ import「exampledefs.less」で各.less.cssファイルにインポートする必要があります。そのファイル内のステートメント。

16
DavidWainwright

私は本当に楽しんでいます MindscapeWebWorkbench 。 .lessサポートを提供するVS 2010の無料プラグインです。さらに、拡張子には.SassおよびCoffeeスクリプトのサポートが含まれています！

試してみる！

ああ、ヘンゼルマン 承認 ;）

10
Custodio

遅い答えですが、これは「純粋な」VS2010でそれを解決するためのハック的な方法です

#if DEBUG
<html><head><style>
#endif

ファイルの先頭に

#if DEBUG
</style></head></html>
#endif

ファイルの最後に

2
Erik Karlsson

Crunchの使用を強くお勧めします： http://crunchapp.net/

Visual Studio（Expressを含む）を使用すると、CrunchでLessファイルを開くことができます。確かに、Visual Studioで開くのではなく、Crunchを開いてファイルを編集しますが、とにかくCrunchを使用する理由はたくさんあります。最大の理由は、CrunchがLessコードを取得して純粋なCSSファイルにコンパイルすることです。利点は、Webサイトにless.jsスクリプトを含める必要がないことです。これにより、余分なオーバーヘッドが回避され、少ないコードを記述できます。VSでlessファイルをダブルクリックしてファイルを編集し、 CSSスタイルシート上で「クランチ」（または保存）します。クランチによって生成される純粋なCSSに触れる必要はありません。

0
skinneejoe

この拡張機能は、完全なIntellisenseを提供します

http://visualstudiogallery.msdn.Microsoft.com/e646c6ec-87a7-45ea-81e8-d655a3d3e73e

0
Tom Dudfield