Css拡張言語のコトハジメ

CSS拡張言語のコトハジメ

Sass（SCSS）、LESS

プロフィール

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

今回の内容

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

最近よく聞くCSS拡張メタ言語とは？

• CSSの利点を活かして、もっとシンプルにかつ構文的に拡
張するメタ言語

– 構文的に？
• CSSの書き方はそのままで

– メタ言語？
• メタ言語とは言語を作るための言語

作り方は？

1. CSSをメタ言語に沿った記法で記述して、指定拡張子で保
存する

2. それをCSSにコンパイル（変換）処理をする

3. CSSが生成される

種類は？

• 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/
• その他いろいろ。

Sassとは？

• Sass（scss/sass） http://sass-lang.com/

– Sass（Syntactically Awesome Style Sheet：かっこいい構文のスタイ
ルシート）

– Rubyで書かれている
• Rubyを開発環境へインストールしてコンパイル
• SassはHamlから派生した

– SassとSCSS - Sassの書き方は二つある
• 拡張子は「.sass」と「.scss」

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
}

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;
} }

LESSとは？

• LESS http://lesscss.org/

– シンプルかつ効率的に

– JavaScriptで書かれている
• クライアントサイドでコンパイル可能
• Nodo.jsを利用すれば動的にCSSがかける

– LESSは既存のCSS構文に沿った記法
• 拡張子は「.less」

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

導入するメリット・デメリット

• メリット

– CSSのコーディングを効率化できる

– 統一化された記述によって可読性があがる

– CSSファイルの分割によるデメリットが解消される

導入するメリット・デメリット

• デメリット

– メタ言語によっては環境構築が必要

– チーム開発の場合、全員が記述方法を覚える必要がある

– 今後どれが主要になるかわからない

クライアントに対しては？

• 基本はCSSで納品

• 拡張メタ言語ファイルも納品の場合、CSSの構成書+メタ言
語の資料作りも場合によっては必要？

• 分かりやすいファイル構成も考える必要がある

何ができるようになるのか？

• 変数（Variables）
• ネスト（Nested Rules）
• 演算（Operations）
• 関数（Functions）
• ミックスイン（Mixins）

※その他、インポートなど。

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

LESS CSS
@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}

Sass（SCSS） LESS
$color: #4D926F; @color: #4D926F;

#header { #header {
color: $ color; color: @color;
} }
h2 { h2 {
color: $ color; color: @color;
} }

ネスト（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;
} }

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;
} }

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 }
} }
} }
} }

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

LESS CSS
@the-border: 1px; #header {
border-left: 1px;
#header {
border-right: 2px;
border-left: @the-border;
border-right: @the-border * 2; }
}

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;
} }

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

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

ミックスイン（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);
}

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);
}

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); }
}

LESSとSassの違い

• 記述方法とコンパイル方法の違い
– たとえば変数
• LESSは@で宣言
• Sassは$で宣言

• 出来ることの違い
– LESSはシンプルでコンパクト機能
– Sassは豊富な機能

LESSの構築環境

• クライアントベースでコンパイル

– headタグ内に下記をセットする
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

LESSの構築環境

• 手動でコンパイルする

– オンラインWebツールを利用する

– PCにツールをインストールして利用する

LESSの構築環境

• オンラインWebツールを利用する

– LESSファイルをCSSファイルに変換
http://lesstester.com/

– CSSファイルをLESSファイルに変換
http://css2less.cc/

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に違いがある

注意点

• LESSのJS読み込みは、ローカル環境では実行できない

– Htmlファイルを開いたときのfiletypeのurlやlocalhostのポート番号
付URLなど

Sassの構築環境

• ローカルでコンパイルする

– コマンドプロンプトを使う

– ツールを使う

コマンドプロンプトを使う

• Rubyをインストールする
– http://rubyinstaller.org/
– 「ruby –v」でインストールされているか確認

• gemのアップデート
– gem update --system

• gemでSassをインストール
– gem install sass

コマンドプロンプトを使う

• 作成したscssファイルをcssにコンパイル
– 通常変換
• sass yurufuwa.scss:yurufuwa.css

– 単一ファイルを監視
• sass --watch yurufuwa.scss :yurufuwa.css

ツールを使う

• SCOUT
– http://mhs.github.com/scout-app/

まとめ

• LESS、Sassどちらでも今まで以上の効率の良いコーディン
グを行うことができる

• ファイルは出来る限り分割して、誰が見てもわかりやすい
ように構成しよう

• まずは自分のサイトのCSSを変えてやってみると分かりや
すい

参考URL

• 公式サイト
– LESS « The Dynamic Stylesheet language
– Sass - Syntactically Awesome Stylesheets

• むゆうさんのブログ
– はじめの一歩！CSSをもっと便利に書けるLESSとは

• 自分のブログ
– LESSの使い始めメモ
– Sassの使い始めメモ

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

Css拡張言語のコトハジメ

More Related Content

Viewers also liked

Similar to Css拡張言語のコトハジメ

More from regret raym

Css拡張言語のコトハジメ