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

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …