Downloaded 36 times
![Cloud Computing Bootcamp On The Google App Engine [v1.1]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcloudcomputingbootcamponthegoogleappenginev1-1-090506155059-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Sass(SCSS)について
- 1.
- 2.
- 3.Today’s Agenda• Sassとは？•Sassの特徴• Sassを使った例• まとめ 3
- 4.
- 5.Sass isSass -Syntactically awesome style sheetHampton Catlinが発案したRubyで書かれたCSS Preprocessorsの一つ。CSSファイルにするためにはコンパイル (.sassや.scss を .css に変換) が必要。HTMLのPreprocessorsにHamlから派生がしたものである。Sass記法とSCSS(Sassy sass)記法がある。 5
- 6.Sass isCSSを速く、きれいにDRY(Don't Repeat Yourself) に 書くことができる 6
- 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数値、文字列などで便利な関数が豊富//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.custom functionなければ作ることもできる//custom function@functionaddSass($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.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.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.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.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 , 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.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.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.output styleその他の出力形式$sass --stylenested 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-SassFirefoxには便利なアドオン$ 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.
- 29.disadvantages コンパイルにはRuby環境が必要 windowsはRuby installから‥ ターミナル操作(黒い画面)が必要GUIのアプリでターミナル操作は不要 29
- 30.
- 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.scssstyle.css + _footer.scss components _btn.scss _form.scss ・ ・ ・ 32
- 33.まとめ 33
- 34.
- 35.Let’s Happy SassLife 35