SassでCompassを使用した構文的に素晴らしいスタイルシート
前回の記事では、Compassについて一度触れました。公式サイトによると、それはと記述されています オープンソースのCSSオーサリングフレームワーク.
要するに、コンパスはSassの拡張機能で、LESS Element of LESSのように、すぐに使えるCSS3 Mixinがたくさんありますが、Sassの強力なコンパニオンツールになるものが他にもいくつか追加されています。それをチェックしよう.
コンパスのインストール
Sassのようなコンパス, 私たちのシステムにインストールする必要があります. ただし、Scout AppやCompass.appなどのアプリケーションを使用している場合は、これは不要です。.
それらがなければ、あなたはそれをする必要があります “手動で” スルー 端末/コマンドプロンプト. これを行うには、次のコマンドラインを入力してください。
Mac / Linuxターミナル
sudo宝石インストールコンパス
Windowsのコマンドプロンプト
宝石インストールコンパス
インストールが成功すると、以下に示すように通知を受け取るはずです。
次に、作業ディレクトリで次のコマンドラインを実行して追加します。 プロジェクトファイルをコンパスする.
コンパスinit
参考文献：コンパスコマンドラインドキュメント
コンパス設定
このコマンドを実行したことがある場合 コンパスinit, あなたは今名前のファイルがあるはずです config.rb 作業ディレクトリにあります。このファイルはプロジェクトの出力を設定するために使用されます。たとえば、好みのディレクトリ名を変更できます。.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Compassによって生成されたコメント行を削除します。設定します 本当の コメントを印刷する必要がある場合 偽 する必要がない場合.
line_comments = false
CSSの出力も決定できます。選択できるオプションは4つあります ：拡張, ：コンパクト, ：圧縮そして ネスト. 現時点では、まだ開発段階にあるため、拡張する必要があります。.
output_style =：展開された
私はこれらの設定は一般的にはほとんどのプロジェクトに十分であると思いますが、より多くの設定が必要な場合はいつでもこのドキュメント、コンパス設定リファレンスを参照することができます.
最後に、我々はする必要があります 時計 このコマンドラインを使用してディレクトリ内のすべてのファイル。
コンパス時計
Sassと同様に、このコマンドラインはすべてのファイル変更を監視し、対応するCSSファイルを作成または更新します。しかし、覚えておいてください、あなたがプロジェクトの設定を終えた後にこの行を実行してください。 config.rb, それ以外の場合は、ファイル内の変更を無視します。.
CSS3ミックスイン
CSS3を歩く前に、私たちのプライマリで .scss ファイル、我々は次の行でコンパスをインポートする必要があります @import "コンパス";, これにより、Compassのすべての拡張子がインポートされます。しかし、CSS3だけが必要な場合は、この行を使ってより具体的に行うこともできます。 @import "compass / css3".
参考文献：CSS3コンパス.
それでは、SaasとCompassで何かを作り始めましょう。 HTML文書の中で、あなたも作成したと仮定して、以下の簡単なマークアップを置きます。
考え方も単純です。丸みを帯びた角を持つ回転ボックスを作成します。以下はスターター用のSassネストスタイルです。
ボディ背景色：＃f3f3f3;セクション幅：500ピクセル。マージン：50px auto 0。 div 幅：250ピクセル;高さ：250ピクセル。背景色：#ccc;マージン：0自動。
そして、長方形を丸みを帯びた角にするために、次のようにCompass CSS 3 Mixinを含めることができます。
ボディ背景色：＃f3f3f3;セクション幅：500ピクセル。マージン：50px auto 0。 div 幅：250ピクセル;高さ：250ピクセル。背景色：#ccc;マージン：0自動。ボーダー半径を含める。
この ボーダー半径 Mixinはブラウザのプレフィックスをすべて生成します。デフォルトでは、コーナーの半径は次のようになります。 5px. しかし、このようにして必要に応じて半径を指定することもできます。 @include border-radius（10px）; .
セクションdiv width：250px;高さ：250ピクセル。背景色：#ccc;マージン：0自動。 -webkit-border-radius：10ピクセル。 -moz-border-radius：10ピクセル。 -ms-border-radius：10ピクセル。 -o-border-radius：10ピクセル。 border-radius：10ピクセル。
次に、計画としてボックスも回転させます。コンパスを使うのは本当に簡単です。私たちがする必要があるのは、単に変換メソッドを呼び出すことだけです。
ボディ背景色：＃f3f3f3;セクション幅：500ピクセル。マージン：50px auto 0。 div 幅：250ピクセル;高さ：250ピクセル。背景色：#ccc;マージン：0自動。 @include border-radius（10px）; @include回転します。
このMixinはそれらの面倒なベンダの接頭辞も生成し、ローテーションはデフォルトで45度かかります。下記の生成されたCSSを参照してください。.
セクションdiv width：250px;高さ：250ピクセル。背景色：#ccc;マージン：0自動。 -webkit-border-radius：10ピクセル。 -moz-border-radius：10ピクセル。 -ms-border-radius：10ピクセル。 -o-border-radius：10ピクセル。 border-radius：10ピクセル。 -webkit-transform：rotate（45deg）; -moz-transform：rotate（45deg）; -ms-transform：rotate（45deg）; -o-transform：rotate（45deg）;変換：回転（４５度）。
コンパスヘルパー
コンパスの最も強力な機能の1つは、ヘルパーです。公式サイトによると, コンパスヘルパーはSassが提供する機能を強化する機能です。. わかりました、明確な絵を得るために次の例を見てみましょう。.
@ Font-faceファイルを追加する
この例では、カスタムフォントファミリーを追加します。 @フォントフェイス ルール。普通のCSS 3では、コードは以下のようになり、4つの異なるフォントタイプで構成されます。一部の人にとっては覚えにくいです。.
@ font-face font-family： "MyFont"; src：url（ '/ fonts / font.ttf'）形式（ 'truetype'）、url（ '/ fonts / font.otf'）形式（ 'opentype'）、url（ '/ fonts / font.woff'）形式（ 'woff'）、url（ '/ fonts / font.eot'）フォーマット（ 'embedded-opentype'）;
コンパスとは 私たちはもっと簡単に同じことをすることができます フォントファイル（） ヘルパー
@include font-face（ "MyFont"、フォントファイル（ "font.ttf"、 "font.otf"、 "font.woff"、 "font.eot"））;
上記のコードは最初のコードスニペットとまったく同じ結果を生成します、それはまた自動的にフォントタイプを検出してそれをに追加します。 フォーマット（） 構文.
ただし、コードをよく見ると、フォントパスは追加されていません。/ fonts /）それで、コンパスはどのようにしてフォントがどこにあるのかを知りましたか？混乱しないでください。このパスは実際には config.rb と fonts_path 財産;
fonts_dir = "fonts"
それでは、それをに変更したとしましょう。 fonts_dir = "myfonts", 生成されたコードは url（ '/ myfonts / font.ttf'）. デフォルトでは、パスを指定していないときは、Compassによってパスが指定されます。 スタイルシート/フォント.
画像を追加する
別の例を作成しましょう。今回は画像を追加します。 CSSを通して画像を追加するのは一般的なことです。我々は一般的にこれを使用して 背景画像 財産、そうです。
div background-image：url（ '/ img / the-image.png'）;
コンパスではなく、 url（） 機能、私達はそれを取り替えることができます image-url（） ヘルパーと追加に似た @フォントフェイス 上記で、パスを完全に無視して、コンパスに残りを処理させることができます。.
このコードは最初のスニペットとまったく同じCSS宣言も生成します。.
div background-image：image-url（the-image.png）;
さらに、CompassにはImage Dimension Helpersもあり、主に画像の幅と高さを検出します。したがって、CSSでこれらの両方を指定する必要がある場合は、次のようにさらに2行追加できます。
div background-image：image-url（ "images.png"）; width：image-width（ "images.png"）;高さ：image-height（ "images.png"）;
出力はこのようになります。
div background-image：url（ '/ img / images.png？1344774650'）;幅：80ピクセル。高さ：80ピクセル。
参考文献：コンパスヘルパー関数
最終的な考え
さて、私たちは今日コンパスについてかなり多く議論しました、そしてあなたがそれが本当に強力なツールであるのを見ることができるようにそして私達がもっと洗練された方法でCSSを書かせてください.
そして、あなたがすでに知っているように、Sassだけが唯一のものではありません CSSプリプロセッサ;我々が以前に徹底的に議論したLESSもあります。次の記事では、私たちは直接比較することを試みるでしょう、これら二つのうちのどちらがCSSの前処理において仕事をよりよくしますか.
- ソースをダウンロード
