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

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

アーカイブ