css拡張メタ言語 sass が何者かを紹介する | sakanatech
TRANSCRIPT
![Page 1: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/1.jpg)
CSS 拡張メタ言語” Sass” が何者かを紹介する
![Page 2: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/2.jpg)
今日のまとめ
• Sass は「 CSS を便利にする奴」
• 学習の必要があまり無い
• コンパイルすると ❝ .css ❞ が出来る
• SEO にも良いことがある
![Page 3: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/3.jpg)
Sass って何?CSS 拡張メタ言語って何?
Sass は CSS を便利にする奴
![Page 4: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/4.jpg)
CSS 拡張メタ言語とは
• CSS の使い方を拡張する言語– 拡張しやすい– メンテナンスしやすい– CSS を見渡しやすい
• 色んな種類がある– Sass(scss)– Less– Stylus– 他にも色々・・・
Sass は CSS を便利にする奴
![Page 5: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/5.jpg)
コードで Sass を見る
Sass は CSS を便利にする奴
![Page 6: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/6.jpg)
さて、問題何が違うでしょう?
Sass は CSS を便利にする奴
![Page 7: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/7.jpg)
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; }}
![Page 8: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/8.jpg)
{ } カギカッコに親子関係をもたせる事ができる
Sass は CSS を便利にする奴
![Page 9: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/9.jpg)
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; }
}
![Page 10: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/10.jpg)
{ } カギカッコを入れ子で書けるとCSS がバラバラにならない
Sass は CSS を便利にする奴
![Page 11: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/11.jpg)
ちょっとプログラムっぽい動きも出来る
Sass は CSS を便利にする奴
![Page 12: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/12.jpg)
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;}
![Page 13: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/13.jpg)
カラーコードに限らず“何でも”変数保存できる
Sass は CSS を便利にする奴
お客様「色変えて」「サイズ変えて」こんな対応が楽になる
![Page 14: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/14.jpg)
さらに応用も出来る(うちでは導入しません)
Sass は CSS を便利にする奴
![Page 15: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/15.jpg)
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; }
![Page 16: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/16.jpg)
要素を“継承”できる(プログラマ的にはすごい便利)
Sass は CSS を便利にする奴
でも全員で使うには難しいのでコレは使いません
![Page 17: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/17.jpg)
今日は紹介しませんが他にもいっぱいあります
Sass は CSS を便利にする奴
![Page 18: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/18.jpg)
CSS 拡張メタ言語とは
Sass は CSS を便利にする奴
![Page 19: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/19.jpg)
= CSS の使い方を拡張する言語
Sass は CSS を便利にする奴
= CSS を便利にする
![Page 20: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/20.jpg)
学習の必要があまり無い
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; }}
![Page 21: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/21.jpg)
何か気付きませんか?
学習の必要があまり無い
![Page 22: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/22.jpg)
学習の必要があまり無い
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; }}
![Page 23: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/23.jpg)
Sass は新しい CSS を覚えなくても使える
学習の必要があまり無い
![Page 24: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/24.jpg)
学習の必要があまり無い
実は 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; }}
ちょっと脱線
![Page 25: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/25.jpg)
いつも使ってる CSS に+α の便利コマンド
学習の必要があまり無い
変数 $hensu とか{ } 入れ子構造 とか
![Page 26: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/26.jpg)
新しく覚えることはあまり無い
学習の必要があまり無い
![Page 27: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/27.jpg)
さて、問題「ヤマト運輸」 (top ページ )
何個の CSS 読まれているでしょう?
コンパイルすると .css が出来る
![Page 28: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/28.jpg)
正解は 6コ です。
コンパイルすると .css が出来る
![Page 29: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/29.jpg)
もう一つ、問題赤丸部分を修正したいです。
どうやって修正する CSS を見つけますか?
コンパイルすると .css が出来る
![Page 30: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/30.jpg)
[Firefox]firebug で関係する CSS を確認
[GoogleChrome]開発者モードから CSS を確認
コンパイルすると .css が出来る
![Page 31: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/31.jpg)
探す必要ってある?
コンパイルすると .css が出来る
![Page 32: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/32.jpg)
>> Sass の話 <<赤枠の部分だけの CSS があったら
分かりやすいと思いませんか?
コンパイルすると .css が出来る
![Page 33: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/33.jpg)
Q. 画面のパーツ毎に CSS を作るとCSS の数が凄いことになる?
コンパイルすると .css が出来る
![Page 34: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/34.jpg)
A. なりません
コンパイルすると .css が出来る
![Page 35: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/35.jpg)
Sass は複数の scss ファイルから1 つの css ファイルを作れる
コンパイルすると .css が出来る
![Page 36: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/36.jpg)
コンパイルすると .css が出来る
_layout.scss
_foundation.scss
_config.scss
_nav.scss
style.scss
style.css
_header.scss
_content.scss _sidebar.scss
_footer.scss
![Page 37: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/37.jpg)
“ コンパイル”とは
コンパイルすると .css が出来る
![Page 38: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/38.jpg)
Koala
コンパイルすると .css が出来る
![Page 39: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/39.jpg)
コンパイルするためにKoala は起動しなくちゃいけない
コンパイルすると .css が出来る
![Page 40: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/40.jpg)
コレだけは確かに面倒
面倒はこれだけ
コンパイルすると .css が出来る
![Page 41: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/41.jpg)
Koala を起動しない方法もある
コンパイルすると .css が出来る
![Page 42: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/42.jpg)
SEO ってご存知ですか?
SEO にも良いことがある
![Page 43: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/43.jpg)
SearchEngineOptimization - 検索エンジン最適化
SEO にも良いことがある
![Page 44: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/44.jpg)
検索で見つかりやすくすること
SEO にも良いことがある
![Page 45: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/45.jpg)
Google がサイトの表示速度が検索順位に影
響することを示唆する発言
SEO にも良いことがある
![Page 46: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/46.jpg)
速い=検索されやすい
SEO にも良いことがある
![Page 47: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/47.jpg)
Sass = 速い???
SEO にも良いことがある
![Page 48: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/48.jpg)
すみません。また、問題です。① 100 ページの本を 6 冊② 360 ページの本を 1 冊
どっちが“速く読める”でしょう?
SEO にも良いことがある
![Page 49: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/49.jpg)
当然②です
SEO にも良いことがある
![Page 50: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/50.jpg)
>> さっきの話 <<「ヤマト運輸」 (top ページ )
何個の CSS 読まれているでしょう?
SEO にも良いことがある
![Page 51: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/51.jpg)
CSS の大きさを 40% ぐらい減らせたら嬉しい
SEO にも良いことがある
![Page 52: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/52.jpg)
PC の読込はファイル数が多ければ多いほど遅くなる
SEO にも良いことがある
![Page 53: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/53.jpg)
CSS を 1 コに出来たら嬉しい
SEO にも良いことがある
![Page 54: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/54.jpg)
CSS サイズを 40% 減複数の CSS を 1 ファイルに集約
そう、 Sass ならね
SEO にも良いことがある
![Page 55: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/55.jpg)
CSS が軽くなって、数も減る= ページ表示速度が上がる
SEO にも良いことがある
![Page 56: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/56.jpg)
ページ表示速度が上がる= 検索結果が上がる ( かも )
SEO にも良いことがある
![Page 57: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/57.jpg)
ユーザーはページ表示に2 秒以上かかる場合、 2 秒未満で
表示できるページと比べて閲覧率が 200% 以上低い
SEO にも良いことがある
![Page 58: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/58.jpg)
Sass = SEO にも良い
SEO にも良いことがある
![Page 59: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/59.jpg)
SEO に良い↓
サイトの価値向上↓
お客様の価値向上↓
サイト制作した会社の価値向上
SEO にも良いことがあるちょっと脱線
![Page 60: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/60.jpg)
今日のまとめ
• Sass は「 CSS を便利にする奴」
• 学習の必要があまり無い
• コンパイルすると ❝ .css ❞ が出来る
• SEO にも良いことがある
![Page 61: CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech](https://reader035.vdocuments.mx/reader035/viewer/2022062223/5877487e1a28ab84388b4d5f/html5/thumbnails/61.jpg)
CSS 拡張メタ言語” Sass” が何者かを紹介した