I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
Related
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I have a local sass file mapped to its network equivalent in Dev Tools Sources. I can edit in sources, my local file is updated, the css updates (via grunt), and the changes are reflected on the live site. So far, so good. The problem is as soon as Chrome updates with the new CSS it also reverts the local sass in Sources to the network sass. Why is this happening?
I've included a video so you can see what's happening. You can see right at the very end of the video the local sass that I've completely deleted switches back to the network sass which is still there: https://youtu.be/xdZjtBGDAWA
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I am trying to set up the mapping feature in Chrome canary. I followed the screenshots in this answer.
The main feature works, when I inspect an element, it points me to my local sass file and when I edit it, the local file safes, and the `sass --watch' is triggered. However, the browser does not refresh, even though on the "General" tab in devtools I have checked "Auto-reload CSS upon Sass save".
Should the browser reload? Is there a way to get it to reload?
Ps - I have compass but I can not use that as it does not support mapping, so I am compiling sass through the terminal
Thanks
You probably forgot this step:
In the Sources tab, find your generated CSS file, right click on it and choose Map to network resource, and select the same file name in the shown dropdown:
and then choose the matching file from your workspace:
It could be that the Sass-file is still compiling when Chrome tries to reload the CSS. Setting the 'Auto-reload CSS upon Sass save' Timeout to 5000 ms fixed it for me. When Chrome triggers the reload, it can even prevent Sass from recompiling the CSS.
I solved the problem by installing tincr extention and now when I save locally, the browser refreshes.
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.