Skip to content

Sourcemap support #1108

Closed
Closed
@chriseppstein

Description

@chriseppstein
Member

Now that sourcemap support has landed in Sass master, we should probably start thinking about Compass support as well. It shouldn't be too hard; Sass::Engine now has a #render_with_sourcemap method which returns a sourcemap object along with the rendered source, and Sass::Plugin::Compiler accepts a :sourcemap option to handle sourcemap generation automatically.

/cc @nex3

Activity

paulirish

paulirish commented on Nov 29, 2012

@paulirish
Contributor

Just for reference:

Here is the Sass sourcemaps support PR: sass/sass#569 (now in master)

What this enables on the tool side: ctrl-click any property/value/selector and go to the location in the sass/scss where that originates: the expression, mixin, variable where it was birthed or computed. This makes the editing experience of working with sass and tweaking CSS much more enjoyable. The UI side of this is ready in the Chrome DevTools

Adding to compass means running through the compass compiler we can present this hugely improved development and debugging experience but with the full power of compass simultaneously.

chriseppstein

chriseppstein commented on Nov 29, 2012

@chriseppstein
MemberAuthor

Changes need to compass:

New Configuration Options

  • http_sass_dir/http_sass_path - Sass files may now be served via the internet for end users/devs to inspect in their browsers in production.
  • sourcemap_dir/sourcemap_path/http_sourcemap_dir/http_sourcemap_path - Let the user select where source maps get generated. Should default to the css directory.
  • enable_sourcemaps - a boolean option that defaults to true in development, false in production.
  • add_import_path should allow an http location for each sass folder -- if provided, we should immediately create an importer object and configure it to resolve the http path for those
  • source_unpack_dir/source_unpack_path/source_unpack_dir/source_unpack_path - this is the place where compass source files and the source files for plugins will be unpacked so they can be easily found by the browser and served by webservers. It's also where generated sprite files will be written. This should default to a sources subdirectory of the css directory.

Automatic unpacking

When sourcemaps are enabled, the sass files contained within compass's gem folder (and plugins' files) need to be unpacked into the source_unpack_dir folder that can be served over the internet. The sass loadpath entry for each plugin must be configured to know their location. Each framework/plugin will get written into it's own sub-folder according to the name of the framework.

The output format of the unpacked sass files should be converted to the user's preferred syntax if it is not already using it.

Spriting changes

The magic sass file generated by the @import directive will need to be written to the <source_unpack_dir>/compass/generated-sprites/<sprite_folder>.sass/.scss

Compiler changes

When sourcemaps are enabled, we need to call a different sass engine API and write the source map file to the location provided by the compass configuration.

mariusGundersen

mariusGundersen commented on Jan 16, 2013

@mariusGundersen

What is the state of this?

paulirish

paulirish commented on Jan 17, 2013

@paulirish
Contributor

afaik, no developer has taken it on. it's available if someone wants to
work on it.

On Wed, Jan 16, 2013 at 5:41 AM, Marius Gundersen
notifications@github.comwrote:

What is the state of this?


Reply to this email directly or view it on GitHubhttps://github.com//issues/1108#issuecomment-12318775.

scottdavis

scottdavis commented on Jan 17, 2013

@scottdavis
Member

This is a huge undertaking and on my list its very far down =)

Saturate

Saturate commented on Jan 21, 2013

@Saturate

For people needing source maps right now, include sass_options = { :debug_info => true } in your config.rb file, and make sure output_style is not :compressed.

That will make it work very well with the SASS Option enabled in Chrome.

mgol

mgol commented on Feb 18, 2013

@mgol

@Saturate Not in Chrome Canary, unfortunately. :( Which means in a few week there'll be no way to use even Chrome stable with SASS support with Compass.

mgol

mgol commented on Feb 18, 2013

@mgol

A temporary workaround is:

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

Is that any different than using

compass watch

with a correct config.rb? Can't Compass just use the already implemented SASS behavior?

Snugug

Snugug commented on Mar 17, 2013

@Snugug
Contributor

@Saturate The Debug Info isn't a Source Map, it's Sass Debug Info. Source Maps are very specifically a separate .map file that maps selectors/properties/etc… with their source and are a cross-language pseudo standard most commonly used with compiled JS.

@chriseppstein Interesting description of what's needed to get this off the ground. I have one concern though; if Compass is going to unpack plugins to a directory easy for the webdir to read, and the Source Map is going to point to that file, are you not concerned that users will then think that's the actual file that's being used, and therefore attempt to make changes to that file? For many plugins, that would be OK, but for many others that include Ruby, or are primarily powered by Ruby, this may provide a disconnect for users that's not easy to grok.

This all said, for an initial run, how hard would it be to simply enable Source Maps through sass_options as they would exist right now? If not just to see how it would look/work with the current limitations and quirks of the system?

paulirish

paulirish commented on Mar 19, 2013

@paulirish
Contributor

I just succcessfully used sass --compass --sourcemap --watch style.scss:style.css as mentioned by @mzgol ... worked great.

Snugug

Snugug commented on Mar 19, 2013

@Snugug
Contributor

I will give that a try again; when I tried it said it couldn't load Compass

On Mar 19, 2013, at 2:00 AM, Paul Irish notifications@github.com wrote:

I just succcessfully used sass --compass --sourcemap --watch style.scss:style.css as mentioned by @mzgol ... worked great.


Reply to this email directly or view it on GitHub.

mgol

mgol commented on Mar 19, 2013

@mgol

@paulirish Actually, it seems that 'sass --compass' looks for the compass.rb file so the command I use is now even simpler; I just go to the /static dir where I keep my config.rb and invoke:
sass --compass --watch .
It works!

That's why I wonder: can't just Compass delegate to what's already implemented in Sass? Since it just works...

chriseppstein

chriseppstein commented on Mar 19, 2013

@chriseppstein
MemberAuthor

@mzgol The sass directory compiler/watcher didn't exist when I first implemented Compass's compiler/watcher. It's possible that I could delegate to it now. I would need to investigate that. However, even if I did this, things would not /just work/ because of the advanced features that compass provides on top of Sass.

119 remaining items

jackoverflow

jackoverflow commented on Aug 17, 2014

@jackoverflow

thanks to @chriseppstein for releasing compass 1.0, it also comes with sass 3.3.14. I just added "source_map: true" in my config.rb and ran "sass --compass --sourcemap --watch sass/style.scss :css/style.css" and voila!

I'm using chrome canary for my dev. ;) I hope it works for you guys as well.

stereokai

stereokai commented on Aug 17, 2014

@stereokai

Congrats on the release, it's been a long and fruitful road.

funkyfuture

funkyfuture commented on Aug 17, 2014

@funkyfuture

all Ubuntu-users should be aware that they must install ruby-dev in order to update Compass.

btw, is there a documentation of the confi.rb-options?
i'm curious, because i expected the :development to imply sourcemaps, but i need to set the sourcemap-option for sass.

stereokai

stereokai commented on Aug 17, 2014

@stereokai

Sourcemaps instructions for Yeoman users

It is very easy to get sourcemaps working. Official Yeoman generators usually rely on Compass with Autoprefixer to handle CSS. The steps to enable sourcemaps with these are:

  1. Uninstall both current compass and sass with Ruby gem: gem uninstall compass, gem uninstall sass
  2. Install latest Compass: gem install compass.
  3. In your Gruntfile or Gulpfile, add sourcemap: true to the Compass options block.
  4. In the Autoprefixer options block, add map: true.
  5. Rewrite /app/styles to local path ./app/styles.

If you read no. 5's "rewrite" and had visions of hours and hours of messing around with Gruntfile and npm and scouring SO for answers - fear not: I've got you covered. Just copy this snippet to your Gruntfile (replace your current connect settings). It should be easy to adjust for Gulp users.

Et viola! Sourcemaps are operational.

okaiji

okaiji commented on Aug 17, 2014

@okaiji

I was meddling with this for so long. @stereokai thanks!!

funkyfuture

funkyfuture commented on Aug 17, 2014

@funkyfuture

@stereokai if that intended me as audience, i'm sorry it doesn't help. i don't use grunt, and have hardly an idea what it is anyway.

i just seek for some documentation for pure usage of compass in a shell. or is that so outdated?

Snugug

Snugug commented on Aug 18, 2014

@Snugug
Contributor

11 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @chriseppstein@scottdavis@leevigraham@paulirish@jackw

        Issue actions

          Sourcemap support · Issue #1108 · Compass/compass