CSS 拡張メタ言語” Sass” が何者かを紹介する

今日のまとめ

• Sass は「 CSS を便利にする奴」

• 学習の必要があまり無い

• コンパイルすると ❝ .css ❞ が出来る

• SEO にも良いことがある

Sass って何？CSS 拡張メタ言語って何？

　 Sass は CSS を便利にする奴

CSS 拡張メタ言語とは

• CSS の使い方を拡張する言語– 拡張しやすい– メンテナンスしやすい– CSS を見渡しやすい

• 色んな種類がある– Sass(scss)– Less– Stylus– 他にも色々・・・

　 Sass は CSS を便利にする奴

コードで Sass を見る

　 Sass は CSS を便利にする奴

さて、問題何が違うでしょう？

　 Sass は CSS を便利にする奴

　 Sass は CSS を便利にする奴

SassCSS

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif);}.story .title { color : #0099ff;}.story .text .name { color : #ff99ff;}

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif); // .title { color : #0099ff; } .text .name { color : #ff99ff; }}

{ } カギカッコに親子関係をもたせる事ができる

　 Sass は CSS を便利にする奴

　 Sass は CSS を便利にする奴

SassCSS

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif);}.story .title { color : #0099ff;}.story .text .name { color : #ff99ff;}

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif); // .title { color : #0099ff; } .text .name { color : #ff99ff; }

}

{ } カギカッコを入れ子で書けるとCSS がバラバラにならない

　 Sass は CSS を便利にする奴

ちょっとプログラムっぽい動きも出来る

　 Sass は CSS を便利にする奴

　 Sass は CSS を便利にする奴

SassCSS

a { color : #00cc66;}.btn { color : #642efe;}.box { background-color : #00cc66;}.box { border : solid 1px #642efe;}

$basecolor : #00cc66;$impactcolor : #642efe;

a { color : $basecolor;}.btn { color : $impactcolor;}.box { background-color : $basecolor;}.box { border : solid 1px $impactcolor;}

カラーコードに限らず“何でも”変数保存できる

　 Sass は CSS を便利にする奴

お客様「色変えて」「サイズ変えて」こんな対応が楽になる

さらに応用も出来る（うちでは導入しません）

　 Sass は CSS を便利にする奴

　 Sass は CSS を便利にする奴

Sass

html

.Twitterbtn{ border : 3px solid #000; padding : 10px 20px; color : #fff; border-radius : 10px; background : red;}.Facebookbtn{ border : 3px solid #000; padding : 10px 20px; color : #fff; border-radius : 10px; background : blue;}

<a href=“#” class=“Twitterbtn”>Twitter</a><a href=“#” class=“Facebookbtn”>Facebook</a>

Twitter Facebook

css.btnbase{ border : 3px solid #000; padding : 10px 20px; color : #fff; border-radius : 10px;}.Twitterbtn{ @extend .btnbase; background : red;}.Facebookbtn{ @extend .btnbase; background : blue; }

要素を“継承”できる（プログラマ的にはすごい便利）

　 Sass は CSS を便利にする奴

でも全員で使うには難しいのでコレは使いません

今日は紹介しませんが他にもいっぱいあります

　 Sass は CSS を便利にする奴

CSS 拡張メタ言語とは

　 Sass は CSS を便利にする奴

＝ CSS の使い方を拡張する言語

　 Sass は CSS を便利にする奴

= CSS を便利にする

　学習の必要があまり無い

SassCSS

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif);}.story .title { color : #0099ff;}.story .text .name { color : #ff99ff;}

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif); // .title { color : #0099ff; } .text .name { color : #ff99ff; }}

何か気付きませんか？

　学習の必要があまり無い

　学習の必要があまり無い

SassCSS

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif);}.story .title { color : #0099ff;}.story .text .name { color : #ff99ff;}

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif); // .title { color : #0099ff; } .text .name { color : #ff99ff; }}

Sass は新しい CSS を覚えなくても使える

　学習の必要があまり無い

　学習の必要があまり無い

実は ScssCSS

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif);}.story .title { color : #0099ff;}.story .text .name { color : #ff99ff;}

.story{ width : 980px; margin : 0 auto; background : #fff url(/img/bg.gif); // .title { color : #0099ff; } .text .name { color : #ff99ff; }}

ちょっと脱線

いつも使ってる CSS に+α の便利コマンド

　学習の必要があまり無い

変数 $hensu とか{ } 入れ子構造 とか

新しく覚えることはあまり無い

　学習の必要があまり無い

さて、問題「ヤマト運輸」 (top ページ )

何個の CSS 読まれているでしょう？

　コンパイルすると .css が出来る

正解は ６コ です。

　コンパイルすると .css が出来る

もう一つ、問題赤丸部分を修正したいです。

どうやって修正する CSS を見つけますか？

　コンパイルすると .css が出来る

[Firefox]firebug で関係する CSS を確認

[GoogleChrome]開発者モードから CSS を確認

　コンパイルすると .css が出来る

探す必要ってある？

　コンパイルすると .css が出来る

>> Sass の話 <<赤枠の部分だけの CSS があったら

分かりやすいと思いませんか？

　コンパイルすると .css が出来る

Q. 画面のパーツ毎に CSS を作るとCSS の数が凄いことになる？

　コンパイルすると .css が出来る

A. なりません

　コンパイルすると .css が出来る

Sass は複数の scss ファイルから1 つの css ファイルを作れる

　コンパイルすると .css が出来る

　コンパイルすると .css が出来る

_layout.scss

_foundation.scss

_config.scss

_nav.scss

style.scss

style.css

_header.scss

_content.scss _sidebar.scss

_footer.scss

“ コンパイル”とは

　コンパイルすると .css が出来る

Koala

　コンパイルすると .css が出来る

コンパイルするためにKoala は起動しなくちゃいけない

　コンパイルすると .css が出来る

コレだけは確かに面倒

面倒はこれだけ

　コンパイルすると .css が出来る

Koala を起動しない方法もある

　コンパイルすると .css が出来る

SEO ってご存知ですか？

　 SEO にも良いことがある

SearchEngineOptimization　 - 検索エンジン最適化

　 SEO にも良いことがある

検索で見つかりやすくすること

　 SEO にも良いことがある

Google がサイトの表示速度が検索順位に影

響することを示唆する発言

　 SEO にも良いことがある

速い＝検索されやすい

　 SEO にも良いことがある

Sass ＝ 速い？？？

　 SEO にも良いことがある

すみません。また、問題です。① 100 ページの本を 6 冊② 360 ページの本を 1 冊

どっちが“速く読める”でしょう？

　 SEO にも良いことがある

当然②です

　 SEO にも良いことがある

>> さっきの話 <<「ヤマト運輸」 (top ページ )

何個の CSS 読まれているでしょう？

　 SEO にも良いことがある

CSS の大きさを 40% ぐらい減らせたら嬉しい

　 SEO にも良いことがある

PC の読込はファイル数が多ければ多いほど遅くなる

　 SEO にも良いことがある

CSS を 1 コに出来たら嬉しい

　 SEO にも良いことがある

CSS サイズを 40% 減複数の CSS を 1 ファイルに集約

そう、 Sass ならね

　 SEO にも良いことがある

CSS が軽くなって、数も減る＝　ページ表示速度が上がる

　 SEO にも良いことがある

ページ表示速度が上がる＝　検索結果が上がる ( かも )

　 SEO にも良いことがある

ユーザーはページ表示に2 秒以上かかる場合、 2 秒未満で

表示できるページと比べて閲覧率が 200% 以上低い

　 SEO にも良いことがある

Sass ＝ SEO にも良い

　 SEO にも良いことがある

SEO に良い↓

サイトの価値向上↓

お客様の価値向上↓

サイト制作した会社の価値向上

　 SEO にも良いことがあるちょっと脱線

今日のまとめ

• Sass は「 CSS を便利にする奴」

• 学習の必要があまり無い

• コンパイルすると ❝ .css ❞ が出来る

• SEO にも良いことがある

CSS 拡張メタ言語” Sass” が何者かを紹介した