Sassの便利な機能
◆ネスト
セレクタを入れ子にすることができます。
視認性が高くなり、把握・管理がしやすくなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sample{ a{ text-decoration: none; &:hover{ text-decoration: underline; } } p{ color:#000; span{ color:red; } } } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 |
.sample a { text-decoration: none; } .sample a:hover { text-decoration: underline; } .sample p { color: #000; } .sample p span { color: red; } |
◆スタイルの継承 @extend
1 2 3 4 5 6 7 8 9 10 |
.sampleA{ color:red; float:left; padding:10px; } .sampleB{ color:blue; @extend .sampleA; } |
出力結果
1 2 3 4 5 6 7 8 9 |
.sampleA, .sampleB { color: red; float: left; padding: 10px; } .sampleB { color: blue; } |
◆変数の使用と演算が可能
Sassにはround()やfloor()など、定番の関数も用意されており、理想の演算結果得ることができます。
1 2 3 4 5 6 7 8 9 |
$boxWidth:101px; $boxColor:red; .boxA{ width:$boxWidth; background-color:$boxColor; } .boxB{ width:round($boxWidth/2); } |
出力結果
1 2 3 4 5 6 7 8 |
.boxA { width: 101px; background-color: red; } .boxB { width: 50px; } |
◆スタイルの定義 @mixin
よく使用するスタイル等は、予め定義しておくと@includeで簡単に素早く呼び出すことができます。
また、引数を渡すこともできるため、汎用性も高いです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@mixin boxStyle($bgColor,$fontSize) { padding: 10px; background-color:$bgColor; color: #fff; font-weight: bold; font-size:$fontSize; } .boxA{ @include boxStyle(#000,16px); } .boxB{ @include boxStyle(#fff,12px); } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.boxA { padding: 10px; background-color: #000; color: #fff; font-weight: bold; font-size: 16px; } .boxB { padding: 10px; background-color: #fff; color: #fff; font-weight: bold; font-size: 12px; } |
また、Compassには予め便利なmixingがたくさん定義されており、Compassを使用することでよりスピーディーなスタイル定義が行えます。
CSS3で一番面倒なベンダープレフィックスの処理に関しては特にその効果を発揮できます。
1 2 3 4 5 6 |
@import "compass"; .sample{ @include background-size(); @include opacity(0.5); @include inline-block; } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample { -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; } |
◆条件分岐@ifや繰り返し処理@forが行える
Javascriptライクに書けますが、こう言った事は大抵JS側でやった方が良いので左程活躍する場はなそう?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@import "compass"; $styleSet:2; @for $value from 1 through 10 { .box#{$value} { $bgColor:""; @if $styleSet == 1{ $bgColor:white; } @else if $styleSet == 2{ $bgColor:black; } @else{ $bgColor:red; } background-color:$bgColor; } } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.box1 { background-color: black; } .box2 { background-color: black; } .box3 { background-color: black; } .box4 { background-color: black; } .box5 { background-color: black; } .box6 { background-color: black; } .box7 { background-color: black; } .box8 { background-color: black; } .box9 { background-color: black; } .box10 { background-color: black; } |
◆独自関数が作成できる
@mixin似ていますが、こちらは値を返してくれます。
勿論引数を使うこともできるので、グリッドレイアウトでカラムの幅を変更したりなど、何かと使えそうです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@import "compass"; $pageWidth: 980; $segment:6; @function getColumnWidth($value:$segment) { @return round(($pageWidth / $segment)*$value)+px; } .wrapper{ width:$pageWidth+px; .boxA { width: getColumnWidth(2); } .boxB { width: getColumnWidth(3); } .boxC { width: getColumnWidth(1); } } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 |
.wrapper { width: 980px; } .wrapper .boxA { width: 327px; } .wrapper .boxB { width: 490px; } .wrapper .boxC { width: 163px; } |
◆複数のファイルを1つのcssにまとめることが可能 @include
スタイルは行数が長くなればなるほど、目的のスタイルを見つけづらくなり、作業効率も悪くなります。
Sassでは、@includeを使って別のsassまたはscssファイルを読み込むことができ、複数ファイルで記述したスタイルを、1つのcssファイルに統合して出力することが可能なので、レスポンシブサイトなど、ブレークポイント別にスタイルシートを分け、納品時は1つのcssにまとめると言った使い方が出来ます。
1 2 3 4 5 |
@media screen and (min-width: 769px) { body{ background-color:red; } } |
1 2 3 4 5 |
@media screen and (max-width: 768px) { body{ background-color:blue; } } |
1 2 3 4 5 |
@media screen and (max-width: 640px) { body{ background-color:yellow; } } |
1 2 3 4 5 6 7 |
body{ width:100%; height:100%; } @import "pc"; @import "tab"; @import "sp"; |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { width: 100%; height: 100%; } @media screen and (min-width: 769px) { body { background-color: red; } } @media screen and (max-width: 768px) { body { background-color: blue; } } @media screen and (max-width: 640px) { body { background-color: yellow; } } |
sassまたはscssファイルは、ファイル名の頭に_(アンダーバー)を付けることにより、そのファイルをコンパイル対象外にすることができます。
予めincludeを目的としたファイルを作成する場合は_を付けると良いでしょう。
また@includeで読み込むファイルは、ファイル名先頭の_と拡張子を省略して記述することができます。
1 2 3 4 |
//_common.sassを読み込む例 @include "_common.sass" @include "common.sass" @include "common" |
◆選べる出力フォーマット output_style
config.rbにoutput_styleプロパティを追加することで、任意のフォーマットで出力することが可能です。
■output_style = :expanded
一般的なフォーマットです。
1 2 3 4 5 |
div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
■output_style = :nested
expandedとの違いは閉じ括弧が文末に付く。
1 2 3 4 |
div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
■output_style = :compact
1行にしてくれる。
1 |
div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
■output_style = :compressed
compactをより圧縮したもの。空白等削除。
通常、1行のコメント//は削除され、複数行のコメント/**/は出力されますが、compressedはどちらも出力されない。
1 |
div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} |
制作時はexpanded、納品時はcompressedが良さそう。
最後に
これまで紹介した機能を見ても分かる通り、Sass/CompassはWEBコーディングにおいてとても強力な補助ツールであることは間違いありません。Sass/Compassには、ここで紹介した機能以外にも、沢山の便利な機能が備わっています。興味のある方は是非、実際に使ってみてその便利さを体験してください。個人的にはベンダープレフィックスを書かずに済むだけでも利用の価値は十分あると思います。例えば、右のような角丸、グラデーション、ボックスシャドウ、アニメーションと言った、CSSで最も無駄に時間を消費するベンダープレフィックスを要するスタイルも、短時間で実装することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@import "compass"; $boxColor:#000; $duration:10s; div.sample{ width:100px; height:100px; @include background-image(linear-gradient(top, lighten($boxColor,30), $boxColor)); @include box-shadow(0px 0px 20px rgba(0,0,0,0.6)); @include border-radius(20px); @include animation(rotation $duration linear 0s normal infinite); } @include keyframes(rotation) { 0% { @include rotate(0); } 100% { @include rotate(360deg); } } |
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
div.sample { width: 100px; height: 100px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #000000)); background-image: -moz-linear-gradient(top, #4d4d4d, #000000); background-image: -webkit-linear-gradient(top, #4d4d4d, #000000); background-image: linear-gradient(to bottom, #4d4d4d, #000000); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-animation: rotation 10s linear 0s normal infinite; -webkit-animation: rotation 10s linear 0s normal infinite; animation: rotation 10s linear 0s normal infinite; } @-moz-keyframes rotation { 0% { -moz-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotation { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } |
1 2