Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Run Compass with --sourcemap flag

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.)

like image 326
And Finally Avatar asked Apr 19 '13 08:04

And Finally


3 Answers

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
like image 176
borisdiakur Avatar answered Dec 05 '22 08:12

borisdiakur


Source maps are included starting with Sass 3.3 or later, which is only compatible with Compass 1.0.

https://github.com/chriseppstein/compass/issues/1108

Adding the following to your config.rb will only add the sourcemap information directly to your compiled CSS:

sass_options = { :debug_info => true }

Output:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/chris\/compass\/sass\/test\.scss}line{font-family:\0000314}}
.foo {
  color: red;
}

To get your sourcemap file(s), you need to add this option to your config.rb:

sourcemap = true

Console output:

$ compass watch
 modified config.rb
    clean css
   delete css/test.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write css/test.css
    write css/test.css.map
like image 24
cimmanon Avatar answered Dec 05 '22 08:12

cimmanon


For me it works with

sourcemap = true

in config.rb (solution taken from https://chillco.com/blog/setting-sass-and-compass-source-maps)

I'm using compass via Koala (http://koala-app.com/)

like image 45
JepZ Avatar answered Dec 05 '22 08:12

JepZ