Purpose of scss in ruby on rails

Question

I am new in ruby on rails. May i know what is the purpose of these js/scss? Everytime I created a new controller, it also create an .scss file.. Is this where should I put my js/css?

I tried to put some image background on my home.scss and try to display it to my div class in my view but it didn't display

Note: I put it in the assets/images/

Code

.image_bg{
    background-image: image-url('a.jpg')
}

View

<div class="image_bg">

</div>

Question: How can I display my image background?

Answer 1

You can add your model related CSS and JavaScript in those files

You also need to require them in application.css and application.js

/*   
 *= require css_file_name
 */

and

//= require js_file_name

If you don't want rails to create the JavaScript and CSS files along with every new controller or scaffold add this in application.rb

config.generators do |g|
  g.assets false      # js files
  g.stylesheets false # scss/sass files
end

Answer 2

I am new in ruby on rails. May i know what is the purpose of these js/scss? Everytime I created a new controller, it also create an .scss file. Is this where should I put my js/css?

Rails by default creates a css / js file so you can organize your code by resource.

If you look at application.css and application.js notice the comment line *= require_tree . . This Sprockets directive tells the Rails assets pipeline to include any files in the same directory and its subdirectories when compiling the application.css/js file.

The reason your code is not working is that you have placed it in the wrong folder. CSS should be placed in /app/assets/stylesheets . The /app/assets/images folder is for actual images used to style the site.

You can disable the generation of assets (if you want to) by using an flag when running the generator:

rails g controller foo --skip-assets

Or permanently by modifying config/application.rb

config.generators do |g|
  g.stylesheets false
  g.javascripts false
  # or 
  g.assets false # disables both JS and stylesheets
end

---

Added.

If you intend to use SASS you should rename your application.css to application.scss and remove the sprockets directives:

 *
 *= require_tree .
 *= require_self
 */

And instead use @import "home" which tells the SASS compiler to include the file. See https://github.com/rails/sass-rails

Answer 3

You'll have to include those files into application.scss / application.js file. Use:

@import "home"

Purpose of these files to have well organised codebase. You can organize your assets based on your controller.