HTML5 勉強会@福岡 - 第16回 「LESS/Sass」について

1. Sass(SCSS)について
HTML5 勉強会@福岡 - 第16回
1

2. @kazu69
paperboy&co.
2

3. Today’s Agenda
• Sassとは？
• Sassの特徴
• Sassを使った例
• まとめ
3

4. Sass(SCSS)とは？
4

5. Sass is
Sass - Syntactically awesome style sheet
Hampton Catlinが発案した
Rubyで書かれたCSS Preprocessorsの一
つ。
CSSファイルにするためにはコンパイル (.sass
や.scss を .css に変換) が必要。
HTMLのPreprocessorsにHamlから派生が
したものである。
Sass記法とSCSS(Sassy sass)記法がある。
5

6. Sass is
CSSを速く、きれいに
DRY(Don't Repeat Yourself) に
書くことができる
6

7. Sass(SCSS)の特徴
7

8. mixin
よく使うコードを再利用
//mixin .color1 {
@mixin color { font-size: 1em;
color: #F00; color: #F00; }
}
.color1 { .color2 {
font-size: 1em; font-size: .5em;
@include color; color: #F00; }
}
.color2 {
font-size: .5em;
@include color;
}
8

9. extend
デザインを拡張する
//@extend .box,
.box { .box-red,
display: inline-block; .box-fixHeight {
width: 20%; display: inline-block;
height: 100%; width: 20%;
} height: 100%; }
.box-red { .box-red {
@extend .box; background-color: #F00; }
background-color: #F00;
} .box-fixHeight {
border: 2px solid #CCC; }
.box-fixHeight {
@extend .box;
border: 2px solid #CCC;
}
同じ作業をしないのでスピードアップ
9

10. functions
数値、文字列などで便利な関数が豊富
//function
body {
width: percentage(100px/200px);
opacity: rgba(#333, 0.2);
color: lighten(#333, 2);
&:before {
content: quote(hogemoge);
}
}
body {
width: 50%;
opacity: rgba(51, 51, 51, 0.2);
color: #383838; }
body:before {
content: "hogemoge"; }
10

11. custom function
なければ作ることもできる
//custom function
@function addSass($string) {
@return 'Sass' + $string;
}
.sass {
content: addSass('(Scss)');
}
.sass {
content: "Sass(Scss)"; }
案件に応じて柔軟な対応ができる
11

12. interpolation
変数を柔軟に使うことができる
//interpolation
@mixin context($prop, $val) {
#{$prop}: $val;
}
.class {
@include context(color, black);
@include context(width,100px);
}
.class {
color: black;
width: 100px; }
12

13. iterator
for / while / each がつかえる
//@for .list-1 {
@for $i from 1 through 3 { color: #363636; }
.list-#{$i} { .list-2 {
color: lighten(#333, $i) color: #383838; }
} .list-3 {
} color: #3b3b3b; }
//@each .boo {
@each $key in boo,foo,moo { background-image:
.#{$key} { url("boo.png"); }
background-image: .foo {
url('#{$key}.png'); background-image:
} url("foo.png"); }
} .moo {
background-image:
url("moo.png"); }
13

14. iterator
for / while / each がつかえる
//@while .col-3 {
$i: 3; width: 0px; }
@while $i > 0 { .col-2 {
.col-#{$i} { width: 3px width: 1px; }
- $i; } .col-1 {
$i: $i - 1; width: 2px; }
}
14

15. conditional
if~else がつかえる
//@if /* $i==1 */
$i: 1; .col-1 {
@if $i == 0 { color: blue; }
.col-#{$i} {
color: red;
}
}
@else {
.col-#{$i} {
color: blue;
}
}
15

16. CSS3 prefix
面倒だったCSS3のprefixの処理も簡単にできる
.style {
@mixin addPrefix($pref, $prop,
@include addPrefix($p, $r, .2em);
$val:0) {
@include addPrefix($p, $a, button);
@if 1 < length($pref) {
}
@each $k in $pref {
#{$k}#{$prop}: $val;
}
}
@else {
#{$pref}#{$prop}: $val; .style {
} -webkit-border-radius: 0.2em;
} -moz-border-radius: 0.2em;
-ms-border-radius: 0.2em;
$p: -webkit- -moz- -ms- -o- ''; -o-border-radius: 0.2em;
$r: border-radius; border-radius: 0.2em;
$a: appearance;
-webkit-appearance: button;
-moz-appearance: button;
-ms-appearance: button;
-o-appearance: button;
appearance: button; }
16

17. debug , error
debugなど標準出力もできる
//@debug DEBUG: 2px
@debug 1px + 1px;
//@warn WARNING: 2pxになる
@warn ‘2pxになる’;
$x: 1px+1px;
正しい構文でないとエラーとなりコンパイルできない
body { error test.scss (Line 3: Invalid
font-weight: bold CSS after " color": expected
";", was ": #333;")
color: #333;}
単位付きの計算で正確な値を返してくれる
p { p {
width: 1cm + 8mm;} width: 1.8cm; }
/* Lessだと9cmとなる */
単位ごとに計算できないときはエラーになる
17

18. partial
サイトのパフォーマンスを最適化
application.scss _reset.scss _global.scss _layout.scss _thema.scss
@import “reset”,”global”,”layout”,”thema”
application.css reset.css global.css layout.css thema.css
複数のファイルを一つにまとめてコンパイル
HTTPリクエストを減らせる
18

19. compile option
ファイルの編集を監視できる
ファイル単位
hoge.scss hoge.css
$sass --watch hoge.scss:hoge.css
ディレクトリ単位
sass css
$sass --watch sass:css
ファイルが編集されると自動でコンパイル
19

20. minify
20KB 15KB
$sass --style compressed style.scss:style.css
body{ body{background:#fff;font:62.5% palatino, "times
background: #fff; new roman", serif;color:#333}strong{font-
font: 62.5% palatino, "times new roman", serif; weight:bold}a:link,a:visited{color:#9C8A6A;text-
color: #333; decoration:none
}
strong{
font-weight: bold;
}
a:link,
a:visited{
color: #9C8A6A;
}
a:hover,
a:active{
color: #3E372B;
}
コードを圧縮(minify)してコンパイルできる
ファイルサイズを減らせる
20

21. output style
その他の出力形式
$sass --style nested style.scss:style.css
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
$sass --style expanded style.scss:style.css
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
$sass --style compact style.scss:style.css
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
21

22. convert
style.css style.scss
$ sass-convert style.css style.scss
CSSからSassやSCSSに変換できる
運用中のサイトをSassに置き換えることもできるかも
22

23. convert
lessからSCSSに変換できる?
style.less style.scss
$ sass-convert syle.less style.scss
* NOTE: Sass and Less are different languages, and they work differently.
* I'll do my best to translate, but some features -- especially mixins --
* should be checked by hand.
undefined method `build' for module `Less::StyleSheet::Mixin4' (NameError)
23

24. Fire-Sass
Firefoxには便利なアドオン
$ sass —watch home.scss:test1.css —debug-info
24

25. compass
強力なCSSフレームワークがある
便利なmixinが準備されている
$gem install compass
$compass create <myproject>
$cd <myproject>
$compass watch
25

26. Sass3.2~
メディアクエリが使えるようになる
break-small: 320px; profile-pic {
$break-large: 1200px; float: left;
width: 250px;
.profile-pic { }
float: left; @media screen and (max-
width: 250px; width: 320px) {
@media screen and (max- .profile-pic {
width: $break-small) { width: 100px;
width: 100px; float: none;
float: none; }
} }
@media screen and (min- @media screen and (min-
width: $break-large) { width: 1200px) {
float: right; .profile-pic {
} float: right;
} }
}
26

27. Sass3.2~
placeholderも使える
$break-small: 320px;
@mixin respond-to($media) {
@media only screen and (max-width: $break-small)
{ @content; }
}
.profile-pic {
width: 250px;
@include respond-to(handhelds) { width: 100%;}
}
.profile-pic {
width: 250px;}
@media only screen and (max-width: 320px) {
.profile-pic {
width: 100%;}
}
27

28. Sass(SCSS)の弱点
28

29. disadvantages
コンパイルにはRuby環境が必要
windowsはRuby installから‥
ターミナル操作(黒い画面)が必要
GUIのアプリでターミナル操作は不要
29

30. Sass(SCSS)を使った例
30

31. choose reason Sass
Sassを選んだ理由
・CSSに近い感覚(記述)でつかえる
・できるだけ簡単に使える
・情報量が豊富で実績がある
・強力なフレームワークがある
・Lessよりも柔軟に使える
・コンパイルしたCSSをリリースするので安心
31

32. operation sample
_import.scss
_import.scss _color.scss
sass core mixins
配下のファイルを全て _font.scss
・
importする ・
・
_page1.scss
_page2.scss
contents
・
出力する style.scss ・
・
ディレクトリ
css _const.scss
_reset.scss
コンパイルされた globals
ファイルをキャッシュ _layout.scss
.sass-cache
_nav.scss
style.css + _footer.scss
components _btn.scss
_form.scss
・
・
・
32

33. まとめ
33

34. conclusion
・SCSS記法だと記法習得コストは高くない
・@mixinと@extendだけでも効率的になる
・GUIツールを使えばターミナルが苦手でも十分使える
・小規模な開発から導入してみるとわかりやすい
・運用しつつノウハウをためて、mixinなどを充実させると
より効率的になる
・複数人で開発するときも役割分担しやすい
・IE6,7,8のセレクター上限数(selector limit4096)には注意
・Lessのように動的な変更ができない
・CSSの癖が出にくく、クオリティも一定に保つことができる
34

35. Let’s Happy Sass Life
35