RealPath:
WebPath:
2016/12/24 22:13 (JST) 更新
Tips >>

LESS の扱い

Contents

CSS を生で触るのは辛いので自動的に LESS を CSS に変換する仕組みを導入します。

  • 2016/10/19 LessBundle を用いる方式に変更

サンプルコード

LESS 概要

普通の CSS だと

.jumbotron h1{
    color: red;
}
.jumbotron p{
    color: blue;
}

と書くところを、LESS だと
.jumbotron{
	h1{
	    color: red;
	}
	p{
	    color: blue;
	}
}

って書けたりします(ネスト構造)。他にも変数のようなものが使えたりとなかなか便利なので習得しておくと便利です。

同様の仕組みとして SCSS(Sass) というものもありますが、このあたりは好みで選べば良いです。とりあえず今回は LESS 導入方法の解説になります。

パッケージインストール

Package Manager Console により以下を実行します。

PM> Install-Package dotLess
PM> Install-Package System.Web.Optimization.Less

dotLess および LESS の最適化用のパッケージが導入されます。

エラー回避

Web.config に以下の追記を行います。

<system.webServer>
  <validation validateIntegratedModeConfiguration="false" /> <!-- ★ココを追加 -->
  ....
</system.webServer>

LESS ファイル設置

今回はプロジェクト配下の Content/app.less としてファイルを設置することにします。
img--500--size

img--300--size

Content/app.less

.jumbotron{
	h1{
	    color: red;
	}
	p{
	    color: blue;
	}
}

LESS の組み込み

App_Start/BundleConfig.cs に以下の変更を加えます。

public static void RegisterBundles(BundleCollection bundles)
{
	....
	// ★ *.less をまとめたバンドルを追加
	bundles.Add(new LessBundle("~/Content/main-less").Include(
		"~/Content/app.less",
		"~/Content/app2.less" // 必要に応じて複数の less を追加していく
	));
}

 
Bundle の仕組みについては別途ページで解説しようと思いますが今のところは何となく雰囲気だけ掴めていればOKです。
端的にいうと複数の less のファイル実体をまとめて ~/Content/main-less という名前で管理できるようにラッピングしています。

動作確認

プロジェクトを起動し、動作を確認してみます。

app.less による色指定が適用されたことが確認できました。
img--500--size

ブラウザ機能によりHTMLソースを見てみると、app.less という名前のファイルが取り込まれていることがわかります。
img--500--size

app.less を開くと、実際には app.less の中身が CSS 書式に展開されていることが確認できます。
img--350--size

おしまい

CSS は生で書いていると肥大化して収集つかなくなるので LESS や SCSS(Sass) を早めの段階で導入することをお勧めします。