My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic
Related
I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one.
Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?
P.S. I'm new to scss/sass/css pre-processor things
You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)
What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
I'm choosing a css pre-processor for some projects, and want to make sure it can be debugged in both Firebug and Chrome inspector (to see the actual lines in .less .scss .styl). Is it currently possible to set up chrome/ff debugging for these 3 pre-processors?
For preprocessors that support CSS source maps, Chrome DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.
To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file (for example, .scss file).
You can read more info at https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
In case anyone else ends up here, to use source maps in Chrome for Sass, you need to use the --sourcemap flag to generate them first!
sass --watch --sourcemap --debug-in sass/screen.scss:screen.css
More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass
The --debug-info flag will set the css up to work with FireSass.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.