この記事は別サイトにて、'14年6月に作成したものです。
環境
Ruby が入っているPC ( 自分はMac OS X)
実際にCompass を導入
bundlerにて
gem "compass"にて導入
もしくは 公式サイトにある通りコマンドを叩く。
$ sudo gem update --system
$ sudo gem install compass
インストール後、
CakePHPのapp/webrootにて、
$ compass create ./
を実行し、config.rbファイルを作る。
config.rbファイルを編集
config.rb
require 'bootstrap-sass'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
relative_assets = true
$ compass compile .
bootstrap-sassをインストール
README.mdの b. Compass without Railsを参考に
$ sudo gem install bootstrap-sass
でbootstrap-sassをインストール。
その後、compass create ./で作成したconfig.rbファイルに、
config.rb
require 'bootstrap-sass'
を追加。
そして、
$ bundle exec compass install bootstrap
を実行。
directory app/webroot/css/fonts/bootstrap/
directory app/webroot/js/bootstrap/
create sass/styles.scss
create sass/_variables.scss
create app/webroot/js/bootstrap/affix.js
create app/webroot/js/bootstrap/alert.js
create app/webroot/js/bootstrap/button.js
create app/webroot/js/bootstrap/carousel.js
create app/webroot/js/bootstrap/collapse.js
create app/webroot/js/bootstrap/dropdown.js
create app/webroot/js/bootstrap/modal.js
create app/webroot/js/bootstrap/popover.js
create app/webroot/js/bootstrap/scrollspy.js
create app/webroot/js/bootstrap/tab.js
create app/webroot/js/bootstrap/tooltip.js
create app/webroot/js/bootstrap/transition.js
create app/webroot/css/fonts/bootstrap/glyphicons-halflings-regular.eot
create app/webroot/css/fonts/bootstrap/glyphicons-halflings-regular.svg
create app/webroot/css/fonts/bootstrap/glyphicons-halflings-regular.ttf
create app/webroot/css/fonts/bootstrap/glyphicons-halflings-regular.woff
remove .sass-cache/
remove app/webroot/css/ie.css
remove app/webroot/css/print.css
remove app/webroot/css/screen.css
create app/webroot/css/ie.css
create app/webroot/css/print.css
create app/webroot/css/screen.css
create app/webroot/css/styles.css
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="app/webroot/app/webroot/css/styles.css" rel="stylesheet" type="text/css" />
</head>
最後に書かれたタグの通り、
echo $this->Html->css("style");
とCakeのctpファイルに記述して完了！あとはガシガシコーディングするだけです。