, ,

[Sass & Compass] Compass: プロジェクトのはじめかた

公開日: 2013/10/30
更新日: 2020/10/04

ミニマムにプロジェクトをはじめる手順をまとめます。

Contents

初期化してプロジェクトをはじめる

プロジェクトディレクトリから開始します。
compass create にオプションを付けて実行する例が多いですが、個人的には下記の流れがおすすめ。

  1. compass create –bare
  2. config.rb を編集する
  3. compass init

実は config.rb さえあれば、最後の compass init だけですぐに始められます。

compass create –bare

設定ファイルを生成します。

% compass create my_project --bare
directory my_project/
directory my_project/sass/
   create my_project/config.rb
*********************************************************************
Congratulations! Your compass project has been created.
  :
  :

config.rb を編集する

プロジェクトに応じた内容を設定ファイルに記述していきます。

% cd my_project
% subl config.rb

それぞれの設定項目については、下記が分かりやすかったです。

この設定ファイルには、いろいろと確認すべき点があるので、別途まとめることにします。

compass init

設定に応じたファイルやディレクトリが生成されます。

% compass init
directory stylesheets/
   create sass/screen.scss
   create sass/print.scss
   create sass/ie.scss
   create stylesheets/ie.css
   create stylesheets/print.css
   create stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
:
:
:
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

あわせて html ファイルに加えるべき、haed タグの内容が出力されました。

CSS Framework を使う場合

公式の例は以下ですが、

$ compass create my_project --using blueprint/basic

init にオプションを付ければ良いようです。

% compass init --using blueprint

既存プロジェクトに後から追加する場合は、以下の通り。

% compass install blueprint

.gitignore

git を使っている場合は、.gitignore に下記を追加します。

.sass-cache/

ファイル作成

とりあえずファイルを作成してみます。
init 時に表示された head 情報を入力します。

% subl index.html

@import で compass をインポートします。

% subl sass/style.scss

@import "compass";
@import "compass/reset/";

@import “compass” で import される module

  • CSS3 – Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
  • Typography – Provides basic mixins for common typography patterns.
  • Utilities – Provides basic mixins for common styling patterns.

別途、import する必要がある module

  • Layout – Page layout module.
  • Reset – Adds a CSS Reset into your stylesheet.

compass w

sass ディレクトリ以下のファイルを監視し、変更があれば自動コンパイルされます。

% compass w
>>> Change detected at 17:52:04 to: style.scss
   create stylesheets/style.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.

Ctl + C で終了します。