1. CSS拡張言語のコトハジメ
Sass（SCSS）、LESS

2. プロフィール
• 名前：Yuu（Tsukaguchi Yuji）
• 会社：動画配信会社
• 出来ること
– ディレクション・デザイン・コーディング
– WordPress・Movable Type
• Twitter：regret_raym
• Facebook：regretraym
• サイト：
– http://creator-life.net/
– http://code-life.net/

3. 今回の内容
• 最近よく聞くCSS拡張メタ言語とは？
• 作り方は？
• 種類は？
• 導入するメリット・デメリット
• 何ができるようになるのか？
• LESSとSASSの違い
• 使う環境を整える
• まとめ

4. 最近よく聞くCSS拡張メタ言語とは？
• CSSの利点を活かして、もっとシンプルにかつ構文的に拡
張するメタ言語
– 構文的に？
• CSSの書き方はそのままで
– メタ言語？
• メタ言語とは言語を作るための言語

5. 作り方は？
1. CSSをメタ言語に沿った記法で記述して、指定拡張子で保
存する
2. それをCSSにコンパイル（変換）処理をする
3. CSSが生成される

6. 種類は？
• Sass（scss/sass）
– http://sass-lang.com/
• LESS
– http://lesscss.org/
• Stylus
– http://learnboost.github.com/stylus/
• Tass
– http://cho45.github.com/tasscss/
• PCSS
– http://pcss.wiq.com.br/
• その他いろいろ。

7. SassとLESS

8. Sassとは？
• Sass（scss/sass） http://sass-lang.com/
– Sass（Syntactically Awesome Style Sheet：かっこいい構文のスタイ
ルシート）
– Rubyで書かれている
• Rubyを開発環境へインストールしてコンパイル
• SassはHamlから派生した
– SassとSCSS - Sassの書き方は二つある
• 拡張子は「.sass」と「.scss」

9. SassとSCSSの書き方の違い
Sass記法 SCSS記法
ul ul{
display:inline;
display:inline li{
li display:inline;
a{
display:inline color:inline;
a &:hover, &:visited{
color: #000;
color: #ccc }
&:hover, &:visited }
}
color: #000
}

10. SCSSの出力サンプル
SCSS CSS
ul{ ul {
display:inline; display: inline;
li{ }
display:inline; ul li {
a{ display: inline;
color:inline; }
&:hover, &:visited{ ul li a {
color: #000; color: inline;
}
}
ul li a:hover,
}
ul li a:visited {
}
color: #000;
} }

11. LESSとは？
• LESS http://lesscss.org/
– シンプルかつ効率的に
– JavaScriptで書かれている
• クライアントサイドでコンパイル可能
• Nodo.jsを利用すれば動的にCSSがかける
– LESSは既存のCSS構文に沿った記法
• 拡張子は「.less」

12. LESSの書き方
LESS CSS
@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}

13. 導入するメリット・デメリット
• メリット
– CSSのコーディングを効率化できる
– 統一化された記述によって可読性があがる
– CSSファイルの分割によるデメリットが解消される

14. 導入するメリット・デメリット
• デメリット
– メタ言語によっては環境構築が必要
– チーム開発の場合、全員が記述方法を覚える必要がある
– 今後どれが主要になるかわからない

15. クライアントに対しては？
• 基本はCSSで納品
• 拡張メタ言語ファイルも納品の場合、CSSの構成書+メタ言
語の資料作りも場合によっては必要？
• 分かりやすいファイル構成も考える必要がある

16. ファイル構成例
less/
|- styles.less
|- variable.less
|- mixin.less
|- layout.less
|- theme.less
css/
|-styles.css

17. 何ができるようになるのか？
• 変数（Variables）
• ネスト（Nested Rules）
• 演算（Operations）
• 関数（Functions）
• ミックスイン（Mixins）
※その他、インポートなど。

18. 変数（Variables）
Sass（SCSS） CSS
$color: #4D926F; #header {
color: #4D926F;
#header { }
color: $ color; h2 {
} color: #4D926F;
h2 { }
color: $ color;
}

19. 変数（Variables）
LESS CSS
@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}

20. 変数（Variables）
Sass（SCSS） LESS
$color: #4D926F; @color: #4D926F;
#header { #header {
color: $ color; color: @color;
} }
h2 { h2 {
color: $ color; color: @color;
} }

21. ネスト（Nested Rules）
Sass（SCSS） CSS
#header { #header h1 {
h1 { font-size: 26px;
font-size: 26px; font-weight: bold;
}
font-weight: bold; #header p {
} font-size: 12px;
p { font-size: 12px; }
a { text-decoration: none; #header p a {
&:hover { border-width: 1px } text-decoration: none;
} }
#header p a:hover {
}
border-width: 1px;
} }

22. ネスト（Nested Rules）
LESS CSS
#header { #header h1 {
h1 { font-size: 26px;
font-size: 26px; font-weight: bold;
}
font-weight: bold; #header p {
} font-size: 12px;
p { font-size: 12px; }
a { text-decoration: none; #header p a {
&:hover { border-width: 1px } text-decoration: none;
} }
#header p a:hover {
}
border-width: 1px;
} }

23. ネスト（Nested Rules）
Sass（SCSS） LESS
#header { #header {
h1 { h1 {
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
p { font-size: 12px; p { font-size: 12px;
a { text-decoration: none; a { text-decoration: none;
&:hover { border-width: 1px } &:hover { border-width: 1px }
} }
} }
} }

24. 演算（Operations）
Sass（SCSS） CSS
$the-border: 1px; #header {
border-left: 1px;
#header {
border-right: 2px;
border-left: $the-border;
border-right: $the-border * 2; }
}

25. 演算（Operations）
LESS CSS
@the-border: 1px; #header {
border-left: 1px;
#header {
border-right: 2px;
border-left: @the-border;
border-right: @the-border * 2; }
}

26. 演算（Operations）
Sass（SCSS） LESS
$the-border: 1px; @the-border: 1px;
#header { #header {
border-left: $the-border; border-left: @the-border;
border-right: $the-border * 2; border-right: @the-border * 2;
} }

27. 関数（Functions）
Sass（SCSS） CSS
$color: #3bbfce; .sample{
border-color: #3bbfce;
.sample { color: #2b9eab;
border-color: $color; }
color:darken($color, 9%);
}

28. 関数（Functions）
LESS CSS
@color: #3bbfce; .sample{
border-color: #3bbfce;
.sample {
color: #2b9eab;
border-color: @color;
color:darken(@color, 9%); }
}

29. ミックスイン（Mixins）
Sass（SCSS） CSS
@mixin button ( $radius : 5px, $bd- article p .button01 {
color : #ff3, $bg-color : #f9f ){
border : 1px solid $bd-color; border : 1px solid #ddd;
border-radius : $radius; border-radius : 10px;
background : $bg-color; background : #123;
width : 100px;
float : left; width : 100px;
} float : left;
article p .button01 { }
@include button (10px, #ddd,
#123);
}

30. ミックスイン（Mixins）
LESS CSS
.button ( @radius : 5px, @bd- article p .button01 {
color : #ff3, @bg-color : #f9f ){
border : 1px solid @bd-color; border : 1px solid #ddd;
border-radius : @radius; border-radius : 10px;
background : @bg-color; background : #123;
width : 100px;
float : left; width : 100px;
} float : left;
article p .button01 { }
.button (10px, #ddd, #123);
}

31. ミックスイン（Mixins）
Sass（SCSS） LESS
@mixin button ( $radius : 5px, $bd- .button ( @radius : 5px, @bd-
color : #ff3, $bg-color : #f9f ){ color : #ff3, @bg-color : #f9f ){
border : 1px solid $bd-color; border : 1px solid @bd-color;
border-radius : $radius; border-radius : @radius;
background : $bg-color; background : @bg-color;
width : 100px; width : 100px;
float : left; float : left;
} }
article p .button01 { article p .button01 {
@include button (10px, #ddd, .button (10px, #ddd, #123);
#123); }
}

32. LESSとSassの違い
• 記述方法とコンパイル方法の違い
– たとえば変数
• LESSは@で宣言
• Sassは$で宣言
• 出来ることの違い
– LESSはシンプルでコンパクト機能
– Sassは豊富な機能

33. 使う環境を整える

34. LESSの構築環境
• クライアントベースでコンパイル
– headタグ内に下記をセットする
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

35. LESSの構築環境
• 手動でコンパイルする
– オンラインWebツールを利用する
– PCにツールをインストールして利用する

36. LESSの構築環境
• オンラインWebツールを利用する
– LESSファイルをCSSファイルに変換
http://lesstester.com/
– CSSファイルをLESSファイルに変換
http://css2less.cc/

37. LESSの構築環境
• PCにツールをインストールして利用する
– SimpLESS（win/mac）
http://wearekiss.com/simpless
– Lessnium（win）
http://blog.mach3.jp/2011/05/lessnium.html
– LESS.app（mac）
http://incident57.com/less/
※変換ツールによって、書きだされるCSSに違いがある

38. 注意点
• LESSのJS読み込みは、ローカル環境では実行できない
– Htmlファイルを開いたときのfiletypeのurlやlocalhostのポート番号
付URLなど

39. Sassの構築環境
• ローカルでコンパイルする
– コマンドプロンプトを使う
– ツールを使う

40. コマンドプロンプトを使う
• Rubyをインストールする
– http://rubyinstaller.org/
– 「ruby –v」でインストールされているか確認
• gemのアップデート
– gem update --system
• gemでSassをインストール
– gem install sass

41. コマンドプロンプトを使う
• 作成したscssファイルをcssにコンパイル
– 通常変換
• sass yurufuwa.scss:yurufuwa.css
– 単一ファイルを監視
• sass --watch yurufuwa.scss :yurufuwa.css

42. ツールを使う
• SCOUT
– http://mhs.github.com/scout-app/

43. まとめ
• LESS、Sassどちらでも今まで以上の効率の良いコーディン
グを行うことができる
• ファイルは出来る限り分割して、誰が見てもわかりやすい
ように構成しよう
• まずは自分のサイトのCSSを変えてやってみると分かりや
すい

44. 参考URL
• 公式サイト
– LESS « The Dynamic Stylesheet language
– Sass - Syntactically Awesome Stylesheets
• むゆうさんのブログ
– はじめの一歩！CSSをもっと便利に書けるLESSとは
• 自分のブログ
– LESSの使い始めメモ
– Sassの使い始めメモ

45. ご清聴有難うございました。