LESS の扱い

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

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

サンプルコード

• GitHub - aspnet-mvc-samples/LessSample: LESS組み込みサンプル

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 としてファイルを設置することにします。

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 による色指定が適用されたことが確認できました。

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

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

おしまい

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