Run Compass with --sourcemap flag

css sass compass-sass
And Finally picture And Finally · Apr 19, 2013 · Viewed 12.7k times · Source

Does Compass support the --sourcemap option in Sass yet? I would like to run Sass through Compass. I have 

sass_options = {:sourcemap => true}

in my config.rb, but when I run compass watch in my project folder no sourcemap files are generated. On the other hand, when I run 

sass --compass --sourcemap --watch scss:css

The source file is generated, but the config.rb is ignored.

(For anybody wondering what a sourcemap is, it's a file that allows Developer Tools inspector to point to the origin of a style in a Sass scss file when you inspect an element.)

Answer

borisdiakur picture borisdiakur · Nov 29, 2013

The solution provided by @cimmanon didn't work for me. What worked for me was the following (credits to Serge-Z in https://github.com/Compass/compass/issues/1108):

sudo gem install compass-sourcemaps --pre

Then you just do compass watch as usual with sass_options = {:sourcemap => true} in your config.rb.

In case you are on OS X El Capitan and have problems installing due to rootless mode (credits to Thomzzzzz in https://github.com/Compass/compass/issues/2018):

sudo gem install -n /usr/local/bin compass-sourcemaps --pre

Related questions

SASS :not selector

I have a :not css selector in SASS mixin but it doesn't do anything: Code Snippet: @mixin dropdown-pos($pos:right) { &:not(.notip) { @if $comp-tip == true{ @if $pos == right { top:$dropdown-width * -0.6; @include tip($pos:$pos); } } } &.notip { @if $pos == …

Read More
Sass Background Image mixin

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do …

Read More
Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include …

Read More