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.
Related
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.
While surfing a website, being curious, I want to understand how some of the css is built.
So I open the devtools and inspect a specific element, on the right panels it shows me the css and a link to scss files, but I click on the name of the scss file then it seems to show me an empty file!
Any way to inspect the sass/scss files from a 3rd party website in devtools?
You can view the original SCSS file only if the sourcemap file is included in the site's files and have been uploaded.
I just can't get Codekit to compile my files.
I created a New Zurb Foundation project exactly as Bryan did in his video. No errors but for him the page loads with the styles. For me it just loads html but no styles are included except app.css.
Bower succesfully downloads all the files to bower_components. How can I make codekit to compile all files? Do I have to manually move the files from the folder to the root? I'm trying to start with SASS so I don't know how the imports work.
They don't mention any imports or any particular settings here: https://incident57.com/codekit/help.html#zurb-foundation
I had same issue, but enabling the libsass compiler for app.scss seemed to work for me.
Highlight app.scss, then in the right pane, select "Use the libsass compiler."
I was able to get this working by changing the output file for app.scss to be /css/app.css. That was the path the the index.html file was looking for.
You'll probably need to create the "css" folder in your project, as it wasn't there for me by default.
I'm moving my workflow to use sourcemaps with Sass, and it was going well, but I'm having trouble with it overwriting my main.scss every time I make a change in Chrome Devtools.
My file structure is like this:
scss - main.scss
|- inc
|-_mixins.scss
|-_typo.scss
|- etc...
and main.scss contains multiple #import "inc/mixins"; lines, obviously each with different filenames.
I created a sourcemap, using sass --sourcemap scss/main.scss css/main.css and then started watching the files using sass --sourcemap --watch scss:css, (all found in this tut).
I've also mapped working files in Chrome Devtools.
It works initially, in that if I examine the elements in DevTools, I see the code in SCSS. If I edit a value, it overwrites my scss/main.scss with the contents of css/main.css, which is massively weird.
Anyone shed any light on this?
So, I figured it out.
I followed the tut to get this working, but had mapped the local files incorrectly.
If you are manually setting up SASS sourcemapping, you must be careful to map included files to the correct locations. Somehow I had one mapped to main.scss, and so it was overwriting it on changes.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.