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

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

今日のまとめ

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

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

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

• SEO にも良いことがある

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

　 Sass は CSS を便利にする奴

CSS 拡張メタ言語とは

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

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


コードで Sass を見る


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



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); // .title { color : #0099ff; } .text .name { color : #ff99ff; }

}

{ } カギカッコを入れ子で書けると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

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

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


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

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


CSS 拡張メタ言語とは


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


= CSS を便利にする

　学習の必要があまり無い

SassCSS



何か気付きませんか？



SassCSS



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



実は ScssCSS



ちょっと脱線

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


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

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


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

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

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

正解は６コです。


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

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


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

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


探す必要ってある？


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

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


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


A. なりません


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



_layout.scss

_foundation.scss

_config.scss

_nav.scss

style.scss

style.css

_header.scss

_content.scss _sidebar.scss

_footer.scss

“ コンパイル”とは


Koala


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


コレだけは確かに面倒

面倒はこれだけ


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


SEO ってご存知ですか？

　 SEO にも良いことがある

SearchEngineOptimization　 - 検索エンジン最適化


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


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

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


速い＝検索されやすい


Sass ＝速い？？？


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

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


当然②です


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

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


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


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


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


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

そう、 Sass ならね


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


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


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

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


Sass ＝ SEO にも良い


SEO に良い↓

サイトの価値向上↓

お客様の価値向上↓

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

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

今日のまとめ

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

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

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

• SEO にも良いことがある

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

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

Engineering

Transcript of CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech