0

After I import @import "compass"; in the application.css.scss file

And I include my own css in app/views/layouts/application.html.haml

my GO Button style has changed , how to fix it in an easier way?

I use Rails 4.0.2

enter image description here

enter image description here

How could I refactor my app/views/layouts/application.html.haml

  1 !!!
  2 %html
  3   %head
  4     %title GooodTheme
  5     = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
  6     = javascript_include_tag "application", "data-turbolinks-track" => true
  7     / Description, Keywords and Author
  8     %meta{content: "Your description", name: "description"}/
  9     %meta{content: "Your,Keywords", name: "keywords"}/
 10     %meta{content: "ResponsiveWebInc", name: "author"}/
 11     %meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
 12     / Styles
 13     / Bootstrap CSS
 14     %link{href:  asset_path("css/bootstrap.min.css"), rel: "stylesheet"}/
 15     / Slider Revolution CSS
 16     %link{href:  asset_path("css/rs-settings.css"), rel: "stylesheet"}/
 17     /[if IE 8]
 18       <link rel="stylesheet" href="css/rs-settings-ie8.css">
 19     / Animate CSS
 20     %link{href:  asset_path("css/animate.min.css"), rel: "stylesheet"}/
 21     / Portfolio CSS
 22     %link{href:  asset_path("css/prettyPhoto.css"), rel: "stylesheet"}/
 23     / Font awesome CSS
 24     %link{href:  asset_path("css/font-awesome.min.css"), rel: "stylesheet"}/
 25     / Custom CSS
 26     %link{href:  asset_path("css/style.css"), rel: "stylesheet"}/
 27     / Favicon
 28     %link{href:  asset_path("#"), rel: "shortcut icon"}/
 29     = csrf_meta_tags
 30   %body
 31     / = render 'layouts/revolution_bar'
 32     / = render 'layouts/service'
 33     / = render 'layouts/about_us'
 34     / = render 'layouts/projects'
newBike
  • 14,385
  • 29
  • 109
  • 192

1 Answers1

2

Change the order in which your CSS files are imported. Files loaded latter overrides the files that was loaded first.

Raj
  • 22,346
  • 14
  • 99
  • 142
  • Hey what if my own css included in the `app/views/layouts/application.html.haml` – newBike Apr 17 '14 at 09:49
  • @poc you need to move those CSS out of HAML and place them separately. You will be able to customize the order. – Raj Apr 17 '14 at 09:51
  • how could I refactor my `app/views/layouts/application.html.haml`, could you give me some directions, thanks – newBike Apr 17 '14 at 10:16
  • you should not place css files in application.haml, place them in application.css by using asset pipeline - http://guides.rubyonrails.org/asset_pipeline.html – Raj Apr 17 '14 at 11:14