Weitere ähnliche Inhalte Ähnlich wie Sass(SCSS)について (20) 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
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
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
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
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
