work with less or scss and rails

bootstrap_and_overrides.css.less.erb

#############################################################
#the begin time I want use bootswatch, to encjoy multi theme which base on bootstrap,so I install some gem necessary
#Gemfile
gem "twitter-bootstrap-rails", "~> 2.1.0"
gem "less-rails-bootswatch", "~> 0.2.5"
#This gem is meant to be used with bootstrap-sass. 
#gem "bootswatch-rails", "~> 0.0.11"

#bootstrap_and_overrides.css.less.erb

@import "twitter/bootstrap/bootstrap";


<%= "@import 'bootswatch/#{Setting.theme}/bootswatch';" %>
<%= "@import 'bootswatch/#{Setting.theme}/variables';" %>



html {
  width: 100%;
  height: 100%;

}




html {
  width: 100%;
  height: 100%;

}


body { background:none; }



.box {
  /*background-color: #fff;*/
  padding:10px;
  margin: 0 0 20px 0; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

input, textarea, select, .uneditable-input {
    // background-color: #FFFFFF;
    // border: 1px solid #CCCCCC;
    // border-radius: 3px 3px 3px 3px;
    // color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
    width: 600px;
}
textarea {
      height: auto;
}

#Note in my the Application helper not
so I use the
gem "rails-settings-cached", "~> 0.2.1"

to send the Variable to `bootstrap_and_overrides.css.less.erb`

# config/application.yml
#theme = %w(amelia cerulean cyborg journal readable simplex slate spacelab spruce superhero united)
defaults: &defaults
  cool:
    saweet: nested settings
  neat_setting: 24
  theme: 'readable'
  awesome_setting: <%= "Did you know 5 + 5 = #{5 + 5}?" %>

development:
  <<: *defaults
  neat_setting: 800

test:
  <<: *defaults

production:
  <<: *defaults

finally It's work!