前回の記事でsassで作業を効率化するために、関数について触れました。
今回は若干深堀りして、compassの関数でコーディング効率化のためにPreprosユーザーの僕が比較的使っている、かんたんに導入できるものをメモしていきます。
はじめに、compassをインストールすることと、コード上に
1 | @import “compass”; |
の記述をしておいてくださいー！（Preprosの場合はcompassインストールは不要ですので上記の記述を.scssファイルに直接しちゃってください！）
Utilitiesモジュール（ジャンルレスで汎用的なもの）
子要素を横並びにする
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 | .inline–list{ @include inline–list; } .inline–block–list{ @include inline–block–list; } .inline–block–single{ @include inline–block; } |
Css（コンパイル後）
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 | .inline–list { list–style–type: none; } .inline–list, .inline–list li { margin: 0; padding: 0; display: inline; } .inline–block–list { margin: 0; padding: 0; border: 0; overflow: hidden; *zoom: 1; } .inline–block–list li { list–style–image: none; list–style–type: none; margin–left: 0; display: inline–block; vertical–align: middle; *vertical–align: auto; *zoom: 1; *display: inline; white–space: nowrap; } .inline–block–single { display: inline–block; vertical–align: middle; *vertical–align: auto; *zoom: 1; *display: inline; } |
inline-listやinline-block-listは結構たくさん記述が生成されてしまいますね。
僕は一番最後のinline-blockを単体でよく使います。
- Compass Inline List | Compass Documentation
- Compass Inline-Block List | Compass Documentation
- Compass Inline Block | Compass Documentation
Typographyモジュール（テキスト装飾関連）
リンクテキストの:visited , :hover , :active , :focus 一括指定
Sass（コンパイル前）
1 2 3 4 | li a{ //color , :hover , :active , : visited , :focus @include link–colors(#ccc , #fcc , #a99 , #44a , #900); } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | li a { color: #ccc; } li a:visited { color: #44a; } li a:focus { color: #900; } li a:hover { color: #fcc; } li a:active { color: #a99; } |
:focusまで行けちゃうのは便利ですね。
ただ、「解りやすいソースコード」という意味では普通に書いていったほうがいいと思います。
フォントの大きさや行の高さのベースを基軸として段落幅を調節する
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $base–font–size: 20px; $base–line–height : 1.414em; //$base-font-size $base-line-height を基準に。 @include establish–baseline; //adjust-font-size-to(フォントサイズ , ラインヘイト , 基準サイズ（省略時は$base-font-sizeが基準？） ) $base-line-heightが無いと機能しない .adjust–font–size–to{ @include adjust–font–size–to(5px , 2 , 20px); } .leader{ @include leader(); //margin-top @include padding–leader(); //padding-top } .trailer{ @include trailer(); //margin-top @include padding–trailer(); //padding-top } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | html { font–size: 125%; line–height: 1.414em; } .adjust–font–size–to { font–size: 0.25em; line–height: 2.828em; } .leader { margin–top: 1.414em; padding–top: 1.414em; } .trailer { margin–bottom: 1.414em; padding–bottom: 1.414em; } |
establish-baselineをインクルードするとhtmlへの指定まで記述されます。
$base-font-sizeと$base-line-heightは定義しなくてもデフォルトで値があるので省略はできます。
leader()とpadding-leader()が段落の上に作用する幅で、ソレに対してtrailer()とpadding-trailer()が段落の下に作用する幅ですね。
これらは$base-line-heightを基準に設定されます。
コンテンツ幅からはみ出た文章を折り返さずに「…」とする
Sass（コンパイル前）
1 2 3 4 5 | .ellipsis { width: 300px; @include ellipsis(true); } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 | .ellipsis { width: 300px; white–space: nowrap; overflow: hidden; –ms–text–overflow: ellipsis; –o–text–overflow: ellipsis; text–overflow: ellipsis; } |
CSS3モジュール（CSS新要素関連）
要素の透過度を調節する
Sass（コンパイル前）
1 2 3 | .img{ @include opacity(0.5); } |
Css（コンパイル後）
1 2 3 4 | .img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } |
IE用にfilterプロパティも生成してくれます！
マウスオーバー時などに簡易的なCSSアニメーションを実装する
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 11 12 | img{ @include opacity(.5); //プロパティ , かかる時間 , アニメーションの種類 , アニメーション開始までの遅延時間 @include transition(opacity , 1s , ease–in–out , .5s); &:hover , &:active , &:visited , &:focus{ @include opacity(1); } } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 9 10 11 12 | img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; –moz–transition: opacity, 1s, ease–in–out, 0.5s; –o–transition: opacity, 1s, ease–in–out, 0.5s; –webkit–transition: opacity, 1s, ease–in–out, 0.5s; transition: opacity, 1s, ease–in–out, 0.5s; } img:hover, img:active, img:visited, img:focus { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } |
transitionの引数には、順に「プロパティ , かかる時間 , アニメーションの種類 , アニメーション開始までの遅延時間」を書きます。通常の指定の仕方と同じですね。
意外とIE8と9に対応していない。
テキスト、ブロックレベル要素にシャドウをつける
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 | a{ *{ @include text–shadow(0 –1px 1px #000 ); } &:hover{ @include box–shadow( 0 0 5px rgba(#000 , .4) ); } } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 | a * { text–shadow: 0 –1px 1px rgba(0, 0, 0, 0.4); } a:hover { –moz–box–shadow: 0 0 5px rgba(0, 0, 0, 0.4); –webkit–box–shadow: 0 0 5px rgba(0, 0, 0, 0.4); box–shadow: 0 0 5px rgba(0, 0, 0, 0.4); } |
text-shadowは使い方によっては文字を縁ったような表現もできますし、用途に応じてミックスインを作るのに使っています。
box-shadowは微妙～な影を出したいときにrgba()と組み合わせてうっすらと使います。
- box-shadowのブラウザ対応状況
- Compass Box Shadow | Compass Documentation
- text-shadowのブラウザ対応状況
- Compass Text Shadow | Compass Documentation
方向や形を指定して背景色をグラデーションにする
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .radial–g{ @include background–image(radial–gradient(100px 100px , #eeffee , #12aa12)); } .linear–g{ @include background–image(linear–gradient(to bottom right , #eeffee , #12aa12)); } .v–g{ @include background–image(linear–gradient(#00ff00 , #eeffee , #12aa12)); } .h–g{ @include background–image(linear–gradient(to right , #00ff00 10%, #eeffee 20% , #12aa12 90% )); } |
Css（コンパイル後）
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 | .radial–g { background–image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMHB4IiBjeT0iMTAwcHgiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZWZmZWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMmFhMTIiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=’); background–size: 100%; background–image: –moz–radial–gradient(100px 100px, #eeffee, #12aa12); background–image: –webkit–radial–gradient(100px 100px, #eeffee, #12aa12); background–image: radial–gradient(100px 100px, #eeffee, #12aa12); } .linear–g { background–image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZmZlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEyYWExMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==’); background–size: 100%; background–image: –webkit–gradient(linear, 0% 0%, 100% 100%, color–stop(0%, #eeffee), color-stop(100%, #12aa12)); background–image: –moz–linear–gradient(top, #eeffee, #12aa12); background–image: –webkit–linear–gradient(top, #eeffee, #12aa12); background–image: linear–gradient(to bottom right, #eeffee, #12aa12); } .v–g { background–image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWVmZmVlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTJhYTEyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g’); background–size: 100%; background–image: –webkit–gradient(linear, 50% 0%, 50% 100%, color–stop(0%, #00ff00), color-stop(50%, #eeffee), color-stop(100%, #12aa12)); background–image: –moz–linear–gradient(#00ff00, #eeffee, #12aa12); background–image: –webkit–linear–gradient(#00ff00, #eeffee, #12aa12); background–image: linear–gradient(#00ff00, #eeffee, #12aa12); } .h–g { background–image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2VlZmZlZSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMTJhYTEyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g’); background–size: 100%; background–image: –webkit–gradient(linear, 0% 50%, 100% 50%, color–stop(10%, #00ff00), color-stop(20%, #eeffee), color-stop(90%, #12aa12)); background–image: –moz–linear–gradient(left, #00ff00 10%, #eeffee 20%, #12aa12 90%); background–image: –webkit–linear–gradient(left, #00ff00 10%, #eeffee 20%, #12aa12 90%); background–image: linear–gradient(to right, #00ff00 10%, #eeffee 20%, #12aa12 90%); } |
通常の一直線方向のグラデーションはlinear-gradient()で、円形の場合はradial-gradient()で実装します。
radial-gradientの場合は引数に（[円形の大きさ] , [中心の色] , [端の色]）と書くのが基本形。
linear-gradientの場合は（[方向] , [開始点の色] , [終点の色]）と書くのが基本形で、例では「.linear-g」に指定してあるものです。
ほか「.v-g」に（[開始点の色] , [中間点の色] , [終点の色]）と指定してあり、この場合は0%～50%～100%と均等にグラデーションカラーが生成されます。
「.h-g」の場合は、（[方向] , [10%地点での色] , [20%地点での色] , [90%地点での色]）と書くことで水平にグラデーションを生成しています！
borderやpadding幅をwidrhに含める
Sass（コンパイル前）
1 2 3 4 5 | .img{ border: solid 10px; //content-box , border-box , padding-box @include box–sizing(border–box); } |
Css（コンパイル後）
1 2 3 4 5 6 | img { border: solid 10px; –moz–box–sizing: border–box; –webkit–box–sizing: border–box; box–sizing: border–box; } |
引数を省略してもborder-boxになります。
border-boxは、paddingやborder幅をwidthに含める状態となる指定です。
widthを指定して、折り返したテキストを段組にする
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .column { width:500px; p{margin–top: 0;} } .two–columns{ @include column–count(2); } .three–columns{ @include column–count(3); } .withRule{ @include column–rule(1px, dashed, #a00) } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .column { width: 500px; } .column p { margin–top: 0; } .two–columns { –moz–column–count: 2; –webkit–column–count: 2; column–count: 2; } .three–columns { –moz–column–count: 3; –webkit–column–count: 3; column–count: 3; } .withRule { –moz–column–rule: 1px dashed #a00; –webkit–column–rule: 1px dashed #a00; column–rule: 1px dashed #a00; } |
column-countは、決められた幅の中で、指定した数の分だけカラムを生成します。
例の場合は500pxの中でカラムを2つ、3つ生成しています。
IE10、Android OS 4.0～の対応で、他のモダンブラウザに関しては最新であれば問題なく使えます。
加えて、column-ruleをインクルードすることで、カラム間のボーダーの色やスタイルを指定できます。
背景画像の大きさを調節する
Sass（コンパイル前）
1 2 3 4 5 6 7 8 9 10 11 | .contain{ @include background–size(contain); } .cover{ @include background–size(cover); } .half{ @include background–size(50% 50%); } |
Css（コンパイル後）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .contain { –moz–background–size: contain; –o–background–size: contain; –webkit–background–size: contain; background–size: contain; } .cover { –moz–background–size: cover; –o–background–size: cover; –webkit–background–size: cover; background–size: cover; } .half { –moz–background–size: 50% 50%; –o–background–size: 50% 50%; –webkit–background–size: 50% 50%; background–size: 50% 50%; } |
containかcover、数値でも細かく指定できます。引数を省略すると100% autoの指定になります。
要素を変形させる
Sass（コンパイル前）
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 | //transform-origin .apply–origin img{ @include apply–origin(right bottom , 3D–only); } //transform-origin .transform–origin img{ @include transform–origin(); } //transform:perspective() .perspective{ @include perspective(10em); } // transform : rotate() .rotate img{ @include rotate(5deg) } .rotate3d img{ @include rotate3d(10 , 10 , 100); } // transform : translate() .translate img{ @include translate();//default 1em } .translateZ img{ @include translateZ(10px); } .translate3d img{ @include translate3d(50px , 50px , 100px); } // transform : skew() .skew img{ @include skew(); //default 5deg } .skewX img{ @include skewX(10deg); } .skewY img{ @include skewY(25deg); } |
Css（コンパイル後）
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | .apply–origin img { –moz–transform–origin: right bottom; –webkit–transform–origin: right bottom; transform–origin: right bottom; } .transform–origin img { –moz–transform–origin: 50% 50%; –ms–transform–origin: 50% 50%; –webkit–transform–origin: 50% 50%; transform–origin: 50% 50%; } .perspective { –moz–perspective: 10em; –webkit–perspective: 10em; perspective: 10em; } .rotate img { –moz–transform: rotate(5deg); –ms–transform: rotate(5deg); –webkit–transform: rotate(5deg); transform: rotate(5deg); } .rotate3d img { –moz–transform: rotate3d(10, 10, 100, 45deg); –webkit–transform: rotate3d(10, 10, 100, 45deg); transform: rotate3d(10, 10, 100, 45deg); } .translate img { –moz–transform: translate(1em, 1em); –ms–transform: translate(1em, 1em); –webkit–transform: translate(1em, 1em); transform: translate(1em, 1em); } .translateZ img { –moz–transform: translateZ(10px); –webkit–transform: translateZ(10px); transform: translateZ(10px); } .translate3d img { –moz–transform: translate3d(50px, 50px, 100px); –webkit–transform: translate3d(50px, 50px, 100px); transform: translate3d(50px, 50px, 100px); } .skew img { –moz–transform: skew(5deg, 5deg); –ms–transform: skew(5deg, 5deg); –webkit–transform: skew(5deg, 5deg); transform: skew(5deg, 5deg); } .skewX img { –moz–transform: skewX(10deg); –ms–transform: skewX(10deg); –webkit–transform: skewX(10deg); transform: skewX(10deg); } .skewY img { –moz–transform: skewY(25deg); –ms–transform: skewY(25deg); –webkit–transform: skewY(25deg); transform: skewY(25deg); } |
おなじみtransformプロパティですが、compassの手にかかればいとも簡単にベンダープレフィックス付きで指定できます。
いかがでしょう？
ほかにもありますが、比較的すぐに導入できて実践的なのは今回挙げたものが代表的かなー、といったところです。
ちなみに、compassドキュメントと「Sassの教科書」を参考にさせていただきました！
前回の記事もそうですが、僕はPreprosユーザーなので、コマンドラインやターミナルでSassをインストールしていない方でも差し支えなく使えるものばかり挙げています！
コマンドラインやターミナル（もしくはコンパイラの種類による？）を使えば、子要素まで書きだされてしまうcompass関数でも、デフォルトの子要素を自由に変更できたりします。
是非試してみてくださいー！
Sassについての記事、次回は、僕がよく使う自作ミックスインでも紹介しようかと思います。そんなに役に立ちませんが、乞うご期待！
でわ！
