初期設定(Windows版)

プロジェクトの作成

任意のディレクトリ直下で初期化コマンドを実行

D:\Tools\Works\scss>compass create --sass-dir "scss" --css-dir "css"
directory css/
directory scss/
   create config.rb
   create scss/screen.scss
   create scss/print.scss
   create scss/ie.scss
   create css/ie.css
   create css/print.css
   create css/screen.css
 
*********************************************************************
Congratulations! Your compass project has been created.
 
You may now add and edit sass stylesheets in the scss subdirectory of your project.
 
Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.
 
You can configure your project by editing the config.rb configuration file.
 
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]
 
More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/
 
 
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>
 
D:\Tools\Works\scss>
 

作成されたフォルダを確認


compassを起動

プロジェクトを作成したディレクトリで「compass w」を実行して監視を行う

>compass w
>>> Compass is polling for changes. Press Ctrl-C to Stop.
 

sassディレクトリに配置したファイルを変更した場合、cssディレクトリのcssも更新される

>compass w
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 11:16:41 to: screen.scss
overwrite css/screen.css
 


最終更新:2013年05月11日 11:17