I have started to use css files generated from scss files recently.
(I use the default scss structure of magento 1.9)

Previously, when I needed modify web design of sites, I had found target modification(ex. style.css:9011 #content{background:#fff;}) with chrome console. I had tried to change style in browser, and modified that file.

But in SCSS, I can't find target 'scss' file in browser directly.
And so I need to understand the order of importing scss, and I find the target from searching source. ( this way is inefficiency )

Do you have a good idea how to find the modification scss file??

  • I don't know if you mean you have done it but , If you right click inspect in google chrome it gives you the specific elements css . Click on the styles.css:1333 (this is only an example) and it will give you the elements scss file and a position that you have to change. – Bako Gdaniec Mar 22 '16 at 11:02

As per the official RWD Design Guide, you will want to make your SASS changes in a child theme of RWD. In your child theme's config.rb file, you should have sourcemap=true. The sourcemap will tell Chrome where to find the underlying SCSS file that the style came from, and you will see that in the Developer Tools.

Here is my full config.rb file as an example:

if Gem.loaded_specs.has_key?('compass-notify')
    require 'compass-notify'

# add_import_path "../../../rwd/enterprise/scss"
add_import_path "../../../rwd/default/scss"

http_path = "/skin/frontend/theme/default/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true

environment = :development

if environment == :development
  line_comments = true
  sass_options = { :debug_info => true }
  output_style = :expanded
  sourcemap = true
  output_style = :compressed
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.