2012年8月27日 星期一

Windows7安裝Sass及Compass環境

標籤： ,

安裝Sass

  • 下載Ruby安裝檔，安裝過程中將ruby設為環境變數

  • 在windows的命令提示字元中輸入「 gem install sass 」進行安裝

C:\Users\kejyun>gem install sass
Fetching: sass-3.2.1.gem (100%)
Successfully installed sass-3.2.1
1 gem installed
Installing ri documentation for sass-3.2.1...
Installing RDoc documentation for sass-3.2.1...
C:\Users\KeJyun>


  • 安裝完畢後輸入命令「sass --watch 目標檔.sass:編譯檔.css」即可對「目標檔.sass」進行監控，並即時將結果輸出至「編譯檔.css」

安裝Compass




  • 輸入「gem update --system」更新gem系統



C:\Users\kejyun>gem update --system
Updating rubygems-update
Fetching: rubygems-update-1.8.24.gem (100%)
Successfully installed rubygems-update-1.8.24
Installing RubyGems 1.8.24
RubyGems 1.8.24 installed
unable to convert U+0160 from UTF-8 to CP950 for History.txt, skipping
unable to convert U+0160 from UTF-8 to CP950 for History.txt, skipping
== 1.8.24 / 2012-04-27
* 1 bug fix:
  * Install the .pem files properly. Fixes #320
  * Remove OpenSSL dependency from the http code path

------------------------------------------------------------------------------
RubyGems installed the following executables:
        C:/Ruby193/bin/gem
RubyGems system software updated
C:\Users\kejyun>



  • 輸入「gem install compass」進行安裝



C:\Users\kejyun>gem install compassFetching: chunky_png-1.2.6.gem (100%)
Fetching: fssm-0.2.9.gem (100%)
Fetching: compass-0.12.2.gem (100%)
Successfully installed chunky_png-1.2.6
Successfully installed fssm-0.2.9
Successfully installed compass-0.12.2
3 gems installed
Installing ri documentation for chunky_png-1.2.6...
Installing ri documentation for fssm-0.2.9...
Installing ri documentation for compass-0.12.2...
Installing RDoc documentation for chunky_png-1.2.6...
Installing RDoc documentation for fssm-0.2.9...
Installing RDoc documentation for compass-0.12.2...
C:\Users\kejyun>



  • 安裝完畢後輸入命令 「compass create <myproject>」建立compass專案
D:\compass>compass create kejyun_compass
directory kejyun_compass/
directory kejyun_compass/sass/
directory kejyun_compass/stylesheets/
   create kejyun_compass/config.rb
   create kejyun_compass/sass/screen.scss
   create kejyun_compass/sass/print.scss
   create kejyun_compass/sass/ie.scss
   create kejyun_compass/stylesheets/ie.css
   create kejyun_compass/stylesheets/print.css
   create kejyun_compass/stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the sass subdirectory of your proje
ct.
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) t
o your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="styleshee
t" 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="styleshee
t" type="text/css" />
  <![endif]-->
</head>



  • 建完專案後進到專案輸入命令「compass watch」即可對「專案資料夾」進行監控






張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

ADS