SASS, Less, Stylus support?

connor commented 12 years ago

This looks awesome, first of all.

Secondly, I'm doing all of my development work using SASS. Think it'd be possible to update the SASS file (that compiles into the CSS we edit in chrome devtools), instead of the raw CSS? That'd be so awesome.

NV commented 12 years ago

I guess that would be really hard to do. I have to dig how FireSASS work.

jeffscottward commented 12 years ago

Agreed it would be hard to do, but this would be amazing. First off Chrome would need to locate the SCSS file so thats an issue, then recompile to css, and then reload the window on the fly. This would be the absolute greatest thing ever if it could be pulled off. Can we submit a request to google for a feature on this?

NV commented 12 years ago

Locating SCSS files probably the easiest thing here. There is a sourceURL for JavaScript. We could use something like this for CSS.

Mozilla and Google work on Source Mappings format. AFAIK, there is the latest draft.

It’s not yet clear to me how source maps going to help with mixins and variables.

NV commented 12 years ago

I dug FireSASS. It won’t help here.

How FireSASS work? Here is an example.

index.sass:

$blue: #3bbfce

body
  background-color: $blue

$ sass --debug-info index.sass:index.css

index.css

@media -sass-debug-info{filename{font-family:file\:\/\/\/private\/tmp\/sass\/index\.sass}line{font-family:\000033}}
body {
  background-color: #3bbfce; }

It just maps line numbers. I need mapping for every rule, property name and value. And not just lines, but column (or character) position.

franciscolourenco commented 12 years ago

I know css-x-fire is doing it somehow..

NV commented 12 years ago

I accidentally discovered, that applying patches to SCSS, Less and Stylus works well on simple cases :)

franciscolourenco commented 12 years ago

any progress?

NV commented 12 years ago

No, I’m afraid. Source Maps does not allow to edit transformed file.

To make it work, we have to connect SASS/Less/Stylus compiler to DevTools so it would recompile SASS/Less/Stylus file to CSS on every change.

parrker commented 12 years ago

Is the main issue here to recompile Sass file on every change? If it is, maybe the user could still manually make Sass command line tool to watch necessary files (or, if using Compass, the whole directory). This way the job of the Autosave will be reduced only to saving files, and command line tool will recompile them when it detects changes.

If it's not only this problem though, it's a shame.

jeffscottward commented 12 years ago

I think the trick is being able to map that to the CSS panel and it's understanding of the dom to play with CSS live like usual.

I can do without the compiler in the browser but it would be nice. The above feature is the key though.

On Wed, Jul 18, 2012 at 2:10 AM, parrker < reply@reply.github.com

wrote:

Is the main issue here to recompile Sass file on every change? If it is, maybe the user could still manually make Sass command line tool to watch necessary files (or, if using Compass, the whole directory). This way the job of the Autosave will be reduced only to saving files, and command line tool will recompile them when it detects changes.

If it's not only this problem though, it's a shame.

Reply to this email directly or view it on GitHub:

https://github.com/NV/chrome-devtools-autosave/issues/6#issuecomment-7057602

Thanks, Jeff Ward Front-end Developer Tel: 516-551-8624 jsward.17@gmail.com @jeffscottward https://twitter.com/#!/jeffscottward

fredsterss commented 12 years ago

Dude, if this happens I'll fly to the moon.

Irto commented 12 years ago

Well, will be need create a new plugin to Chrome (Pre-processor Dev-tool Tab, maybe) and the liveload only active the watching option from proprocessor compiler.

jeffscottward commented 12 years ago

I'm sorry but you're really gonna have to clarify that. Couldn't understand what you wrote...

what is 'liveload' ? and are you saying to put the compiler in Chrome? or to NOT do that and compile with watch commands locally?

On Wed, Aug 29, 2012 at 12:13 PM, Israel Trindade notifications@github.comwrote:

Well, will be need create a new plugin to Chrome (Pre-processor Dev-tool Tab, maybe) and the liveload only active the watching option from proprocessor compiler.

— Reply to this email directly or view it on GitHubhttps://github.com/NV/chrome-devtools-autosave/issues/6#issuecomment-8130794.

Thanks, Jeff Ward Front-end Developer Tel: 516-551-8624 jsward.17@gmail.com @jeffscottward https://twitter.com/#!/jeffscottward

Irto commented 12 years ago

Sorry, i'm changed the name autosave to liveload o/

Set to compiler watch files through the devtools-autosave and create a new plugin for edit files from preprocessors.

s10wen commented 12 years ago

+1, would be cool if this happens.

drewcovi commented 11 years ago

Looks like this one's back on the "possible" list since we've already got this working using Tincr and the new experiments. Any chance this is possible now using autosave?

s10wen commented 11 years ago

Sass support is now available in Chrome Canary, showing line numbers etc.. http://www.simonowendesign.co.uk/firesass-equivalent-or-similar-for-chrome-dev-tools-chrome-office-hours-live-from-london/

Not looked at tin.cr fully yet, I like to use Emmet with Sublime Text 2 and LiveReload. Not sure how tin.cr will deal with things like mixins and spacing / tabs / line endings etc..

Would be nice if Chrome Dev Tools allowed you to write using Emmet, then auto-saved to Sass and reloaded :neckbeard:

NV / chrome-devtools-autosave

SASS, Less, Stylus support? #6