2014年5月社内技術共有会で発表した内容です。

1. LESS(Leaner CSS)
Visual Studio 2013を用いた
LESSの使い方について
- 2014/05 Younju Park -

2. LESS(Leaner CSS)とは？
• 最初登場したのは2009年
• 動的スタイルシート(CSS)言語でOSS(オープンソース
ソフトウェア)である
• 変数、ネスティング(階層)、Mixin、演算子及び関数
に対応
• LESSをコンパイルすることでCSSを生成
※ブラウザによりLESS.jsを経由してリアルタイムのコンパイルも可能

3. LESSの開発環境構築 in VS2013 （１）
• インストールが必要なプログラム
 Visual Studio 2013 Update 2 RC
Web Essentialsアドインを導入する前にインストールする必要がある。「ユニ
バーサルWindowsアプリ」開発に対応した統合開発環境の更新版である。
 Web Essentials 2013 for Update 2 RC
Web 開発関連の機能を強化するアドイン、LESSなど、たくさんの機能を提
供している。

4. LESSの開発環境構築 in VS2013 （２）
• Visual Studio 2013 Update 2 RCのインストール
下記ページに接続し、ダウンロードした後、インストールを行う。
http://www.microsoft.com/ja-
jp/download/details.aspx?id=42307

5. LESSの開発環境構築 in VS2013 （３）
• Web Essentials 2013 for Update 2 RCのインストール
下記ページに接続し、ダウンロードした後、インストールを行う。
http://visualstudiogallery.msdn.microsoft.com/56633663-
6799-41d7-9df7-0f2a504ca361

6. LESSの開発環境構築 in VS2013 （４）
• Web Essentials 2013 for Update 2 RCのインストール
Visual Studio 2013の「ツール」-「拡張機能と更新プログラム」-「オ
ンライン」-「Web Essentials 2013 for Update 2 RC」からの導
入も可能。
アドオンを選択すれば
「ダウンロード」ボタンが表示され、
ダウンロードが可能になる。
※画像はダウンロード済みの状態。

7. LESSの開発環境構築 in VS2013 （５）
• インストールの確認
Visual Studio 2013の「ツール」-「拡張機能と更新プログラム」-「インス
トール済み」-「ツール」に「Web Essentials 2013 for Update 2 RC」が
確認出来ればOK。
※ Visual Studio 2013 Update 2 RCがインストールされていない場合、
Web Essentialsのインストールが出来ないため、上記の確認のみで問題ない。

8. LESSの使い方 in VS2013 （１）
• LESSファイル作成とビルド
「追加」-「新しい項目の追加」-「Visual C#」-「LESS スタイルシート」で作
成。
保存すればLESSがビルドされ、LessName.css、LessName.css.map
ファイルが作成される。フロント側はビルドされたCSSファイルを参照する。
LessTest.less
LessTest.less LessTest.css
LessTest.css.
map
保存
(ビルド)

9. LESSの使い方 in VS2013 （２）
• LESSの使い方 – 変数
変数定義を代入して使用可能。
宣言ブロック部
変数定義部

10. • LESSの使い方 – Mixin
オブジェクト指向的な使い方が可能。ソースの重複を防ぐことが出来る。
LESSの使い方 in VS2013 （３）
Mixin
宣言ブロック部
@radiusに10pxが
代入された結果値
となっている

11. • LESSの使い方 –ネスティング(階層)
ネスト(階層)化が可能。明確な継承と簡略化が可能。分かりやすい。
LESSの使い方 in VS2013 （４）
#header
h1
p
a
img
a
:hover
#headerの階層

12. • LESSの使い方 –関数と演算子
JavaScriptの関数が使える。変数と一緒に色んな場面に対応可能。
LESSの使い方 in VS2013 （５）

13. • LESSの使い方 –CSSのインポート
外部CSSをインポートして使うことも可能。
LESSの使い方 in VS2013 （６）
LESSファイルを直接インポートする場合
CSSファイルをインポートする場合

14. ありがとうございました！