VisualStudio2012でLESSを使ってみる

VisualStudio2012では標準でLESSが使えるようになっています。

新しい項目を追加する画面にもこんな風に出てきますね。

f:id:nakaji999:20131005004946p:plain

そんなわけで、せっかくですから使ってみましょう。

そもそもLESSって何？

ひと言でいうと、CSSを無駄なく効率的に管理するための仕組みという感じでしょうか。詳しいことは公式サイトを見るか、bingってみるか、Wikipediaさんにお世話になれば何となくイメージできると思います。

公式サイト：LESS - The Dynamic Stylesheet language

使い方

使い方は大きく3つの方法があります。

クライアント側でLESSファイルをCSSとして解釈させる
開発機上でCSSファイルにプリコンパイルする
Webサーバ上でCSSファイルにプリコンパイルする

1.クライアント側でLESSファイルをCSSとして解釈させる

エンドユーザのブラウザ側でJavaScriptを使って解釈させる方法です。

具体的には、各ページの内に以下の様な記述を行います。

    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <script src="less.js" type="text/javascript"></script>

さっそくページを開いて確認してみましょう。。。あれ？

f:id:nakaji999:20131005011740p:plain

IISの場合、LESSファイルのmimeタイプを設定して上げる必要があります*1。Web.configに以下の記述を追加して上げましょう。

  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".less" mimeType="text/css" />
    </staticContent >
  </system.webServer>

これでCSSとして適用された画面が表示されるようになります。

f:id:nakaji999:20131005012453p:plain

ソースの方はこんな感じで元のソースのままです。特にless.jsが書き換えてたりするわけではないようです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <script src="less.js" type="text/javascript"></script>
</head>
<body>
    <div class="hoge"></div>
</body>
</html>