Both SCSS and CSS files in plugin directory?

Question

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

Answer 1

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.

Answer 2

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.