Sass(SCSS)について

4,026 views

Published on

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

Published in: Technology, Design
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,026
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
34
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Sass(SCSS)について

  1. 1. Sass(SCSS)についてHTML5 勉強会@福岡 - 第16回 1
  2. 2. @kazu69 paperboy&co. 2
  3. 3. Today’s Agenda• Sassとは?• Sassの特徴• Sassを使った例• まとめ 3
  4. 4. Sass(SCSS)とは? 4
  5. 5. Sass isSass - Syntactically awesome style sheetHampton Catlinが発案したRubyで書かれたCSS Preprocessorsの一つ。CSSファイルにするためにはコンパイル (.sassや.scss を .css に変換) が必要。HTMLのPreprocessorsにHamlから派生がしたものである。Sass記法とSCSS(Sassy sass)記法がある。 5
  6. 6. Sass is CSSを速く、きれいにDRY(Dont Repeat Yourself) に 書くことができる 6
  7. 7. Sass(SCSS)の特徴 7
  8. 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. 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. 10. functions数値、文字列などで便利な関数が豊富//functionbody { 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. 11. custom functionなければ作ることもできる//custom function@function addSass($string) { @return Sass + $string;}.sass { content: addSass((Scss));}.sass { content: "Sass(Scss)"; } 案件に応じて柔軟な対応ができる 11
  12. 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. 13. iteratorfor / 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. 14. iteratorfor / 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. 15. conditionalif~else がつかえる//@if /* $i==1 */$i: 1; .col-1 {@if $i == 0 { color: blue; } .col-#{$i} { color: red; }}@else { .col-#{$i} { color: blue; }} 15
  16. 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. 17. debug , errordebugなど標準出力もできる//@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. 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. 19. compile optionファイルの編集を監視できる ファイル単位 hoge.scss hoge.css $sass --watch hoge.scss:hoge.css ディレクトリ単位 sass css $sass --watch sass:css ファイルが編集されると自動でコンパイル 19
  20. 20. minify 20KB 15KB $sass --style compressed style.scss:style.cssbody{ 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. 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. 22. convert style.css style.scss $ sass-convert style.css style.scss CSSからSassやSCSSに変換できる運用中のサイトをSassに置き換えることもできるかも 22
  23. 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.* Ill 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. 24. Fire-SassFirefoxには便利なアドオン $ sass —watch home.scss:test1.css —debug-info 24
  25. 25. compass強力なCSSフレームワークがある 便利なmixinが準備されている $gem install compass $compass create <myproject> $cd <myproject> $compass watch 25
  26. 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. 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. 28. Sass(SCSS)の弱点 28
  29. 29. disadvantages コンパイルにはRuby環境が必要 windowsはRuby installから‥ ターミナル操作(黒い画面)が必要GUIのアプリでターミナル操作は不要 29
  30. 30. Sass(SCSS)を使った例 30
  31. 31. choose reason SassSassを選んだ理由・CSSに近い感覚(記述)でつかえる・できるだけ簡単に使える・情報量が豊富で実績がある・強力なフレームワークがある・Lessよりも柔軟に使える・コンパイルしたCSSをリリースするので安心 31
  32. 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.scssstyle.css + _footer.scss components _btn.scss _form.scss ・ ・ ・ 32
  33. 33. まとめ 33
  34. 34. conclusion・SCSS記法だと記法習得コストは高くない・@mixinと@extendだけでも効率的になる・GUIツールを使えばターミナルが苦手でも十分使える・小規模な開発から導入してみるとわかりやすい・運用しつつノウハウをためて、mixinなどを充実させると より効率的になる・複数人で開発するときも役割分担しやすい・IE6,7,8のセレクター上限数(selector limit4096)には注意・Lessのように動的な変更ができない・CSSの癖が出にくく、クオリティも一定に保つことができる 34
  35. 35. Let’s Happy Sass Life 35

×