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

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

アーカイブ