日頃からCSSを書いている人なら一度は思う「変数とか関数とかネストとか使いてぇ！」を叶えてくれる、魔法の言語『Sass』の魅力を伝えます。
まず最初に注意なんですが、SassはCSSと違って環境の構築が必要です。Sass(SCSS)記法によって書かれた.scssファイルは単体では動かすことが出来ないので、コンパイラを通してCSSに変換する必要があります。
環境構築の方法は少し煩雑なので、別の記事で近々解説します。
|
1 2 3 4 5 6 7 8 9 |
$a: 16px; $b: #ff0000; $c: 0 auto; .sample{ font-size: $a; color: $b; margin: $c; } |
|
1 2 3 4 5 |
.sample{ font-size: 16px; color: #ff0000; margin: 0 auto; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
.sample1{ width: 500px + 200px; height: 200px * 5; } $border:2px; $padding:8px; .sample2{ width: 500 - (($border + $padding) * 2); } |
|
1 2 3 4 5 6 7 |
.sample1{ width: 700px; height: 1000px; } .sample2{ width: 480px; } |
|
1 2 3 4 5 6 7 8 9 |
.sample1{ color: #333333; .sample2{ color: #666666; .sample3{ color: #999999; } } } |
|
1 2 3 4 5 6 7 8 9 |
.sample1{ color: #333333; } .sample1 .sample2{ color: #666666; } .sample1 .sample2 .sample3{ color: #999999; } |
|
1 2 3 4 5 6 7 |
a{ color: #4444aa; &:hover{ color: #aaaa22; text-decoration: none; } } |
|
1 2 3 4 5 6 7 |
a{ color: #4444aa; } a:hover{ color: #aaaa22; text-decoration: none; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@mixin foo{ width: 400px; height: 200px; } .sample1{ @include foo; } .sample2{ @include foo; margin: 0 auto; } |
|
1 2 3 4 5 6 7 8 9 10 |
.sample1{ width: 400px; height: 200px; } .sample2{ width: 400px; height: 200px; margin: 0 auto; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@mixin foo($var:200px){ width: $var; height: $var * 2; } .sample1{ @include foo; } .sample2{ @include foo(500px); } |
|
1 2 3 4 5 6 7 8 9 |
.sample1{ width: 200px; height: 400px; } .sample2{ width: 500px; height: 1000px; } |
|
1 2 3 4 5 6 7 |
@mixin foo($a,$b,$c){ width: $a + $b + $c; } .sample1{ @include foo(10px,20px,30px); } |
|
1 2 3 |
.sample1{ width: 60px; } |
Name : Leo
北海道在住の元気な22歳。ゲーセンでバイト中。
右手に酒、左手に煙草、目の前にPCという生活。
割とクズだけどいい人（ただし彼女はいない）。
今欲しいのはリボルトの実機。
Web制作は結構好き。
