何気なく使っていた機能は実はCompassの機能だった
僕の中でsassとcompassはワンセットなので取り立ててこれがコンパスの機能でこれがsassの機能だって意識した事はありませんでした。この便利機能はcompassのものだったのか！と思うと今更ながら新しい発見のような気がしてちょっと特した気分です。というわけで今回はcompassです。と言っても前述の通り特に意識して使っていたわけではないので、mixinとかしか使ってないのですが、まぁそれもでも知っていれば便利なことなのでご紹介します。
compass createで初期設定
プロジェクトの初期設定ファイルを生成する事ができます。ターミナルで任意のディレクトリに移動し
|
1 |
compass create |
を入力すると以下の構成のファイルが生成されます。
|
1 2 3 4 5 6 7 8 9 |
directory sass/ directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss create stylesheets/ie.css create stylesheets/print.css create stylesheets/screen.css |
引数に
|
1 |
--sass-dir "sass" --css-dir "css" |
等を記述することによりディレクトリ名を任意のものに変更することも可能ですが、正直僕はこの機能はつかいません。 config.rbをプロジェクト毎に書き換え手動で設置しています。 sassの記事の内容と重複しますが僕の設定です。
|
1 2 3 4 5 6 7 |
http_path = "/" //サイトのルートパス css_dir = "css" //cssのディレクトリ sass_dir = "scss" //sassのディレクトリ images_dir = "images" //画像のディレクトリ javascripts_dir = "js" //javascriptのディレクトリ output_style = :expanded //コンパイル時のcssの圧縮設定compressedで圧縮 line_comments = false //コンパイル時にsassのコード番号を維持するかどうか |
その他のconfigの詳しい設定はこちらに掲載されています。
compass wでsassファイルを監視
ターミナルでconfig.rbの格納されたディレクトリに移動し
|
1 |
compass w |
を入力するとsassファイルか監視されsassファイルの保存時に自動的にコンパイルされます。
便利なmixin
mixinもたくさん揃っています。詳しくは本家のリファレンスで見てもらった方がいいのかもしれませんが僕がよくつかうmixinだけでも紹介させていただきます。
まずcompassを使うためにcompassのモジュールをインポートします。
|
1 |
@import "compass"; |
これでコンパスのモジュールが使えます。
display: inline-block
ディスプレイインラインブロックはie系で解釈がちがうのでie用のスタイルの記述も必要なのですがcompassのmixinをつかえば
@include inline-block;を記述するだけで以下のクロスブウザ対応のcssが生成されます。
|
1 2 3 4 5 6 |
display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline |
clearfix
floatの解除のやつです。
|
1 2 3 4 5 6 7 |
.clearfix{ @include clearfix; } .clearfix-after{ @include legacy-pie-clearfix; } |
コンパイルされたCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.clearfix { overflow: hidden; *zoom: 1; } .clearfix-after { *zoom: 1; } .clearfix-after:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } |
CSSのリセット
CSSのリセットも
|
1 |
@include global-reset; |
を記述するだけで
|
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 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } |
が生成されます。
cssスプライトが自動生成ができたり他にも便利な事ができそうですが今僕にある知識はこんなもんです。日々勉強ですな。
- 2013年11月10日日曜日
- ：Naruhiko Wakai
コメントを残す