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

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

画像ネタまとめ(画像中央寄せ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5b4ba2ef49 …