skillup

技術ブログ

デザイン

compassについて

投稿日:

sassをベースにしたフレームワークがcompassです。

compassとは?

  • sassの記法をベースにCSSファイルの作成が可能
  • cssだけではなく、jsやimageファイルなどのディレクトリ情報を設定できる
  • sassの記法などについても各種設定することができる
  • 一回一回sassコマンドを打たなくても後述する監視状態にすることで保存時にすぐにcssファイルを作ることができる
  • もとになるような便利なCSSのテンプレート的なものが多数含まれている

使用方法

新規プロジェクト

上記コマンドで設定ファイルやディレクトリなど一通りのものが作られます。

ディフォルトだとconfig.rb(各ディレクトリ情報や設定などが書かれているファイル) sass(sassファイルが格納されている) stylesheet(生成されるcss)が作られています。

上記コマンドは新規のときではなく、sassファイルを更新したときに、うてばcssが作成されます。(既存のファイルが消されるようなことはないです。)

なお、下記コマンドをうてば一回一回compass createコマンドを打たなくても文字通り監視されるので、scssファイルが更新された瞬間にcssが作られます。コマンドに出力されます。

sassディレクトリを指定しても有効になりません。プロジェクトのパスを指定するようにしましょう。

参考リンク

CSSの常識が変わる!「Compass」の基礎から応用まで!

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …