Do you need to deploy SASS in production?

Do we need to include the SASS file in production? Can't we just deploy the compiled CSS output? How do you guys deploy your CSS/SCSS code in production?

If any of you don't include SCSS in production how do you deal with version control like Git. I assume the master version should have the SCSS file there, but pulling from production environment it should be excluded? Is this problematic?

I just want to see what the most efficient way to do this.

The reason I asked this is because, using Chrome DevTools lately I've been seeing scss files as source. To see what I mean, if you go to getbootstrap.com and inspect its styles, you'll see scss as the source.

source map

3 Answers
3

The browser does not render or understand SASS code. Thus serving such files for the sake of styling not only is not required but it doesn't even work¹.

¹ _{Well, yeah, it can work—there're many SASS implementation, including a JavaScript one that can be used in a browser.}

The SASS code you see in your browser's developer tools (not just Chrome) is a developer tool. In order to diagnose CSS issues you can instruct your SASS compiler to generate source maps. A source map is a document that links positions in your possibly minified CSS files to the SASS source code it comes from. When you open your developer tools and the CSS file declares a source map (example):

/*!
* Bootstrap v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f[…]
/*# sourceMappingURL=bootstrap.min.css.map */


… the browser downloads the map (example) which in turn links the corresponding SASS source code files.

{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss"[…]


Together with the file/line/column mapping information, developer tools can reconstruct the SASS code where a given element styles come from.

"mappings":"AAAA;;;;;ACAA,MAGI,OAAA,QAAA,SAAA,QAAA,SAAA,QAAA,[…]


The source files are obviously not required. Whether to include them or not depends on factors like:

Is it okay to distribute them or they contain stuff that's meant to remain private like internal comments or intellectual property?

Do you need to diagnose stuff in the live site?

Sass is converted to CSS, So you don't need to install it on the server. It only needs to be installed locally, Browser only understands CSS, SAAS is a preprocessor scripting language make your code easy to organize and edit with a little effort.

It depends on your build process. If you push Sass files and compile on the webserver when you run your deployments then yes. But I have a file structure something like this:

- src
--- styles
------ Sass files
--- js
--- images

- build
--- assets
------ styles
--------- CSS files
------ js
------ images


So I push everything into git and before I deploy changes to live I run my build commands* locally then push everything into Git.

From here, I deploy everything within the /build directory up onto the webserver for my site.

/build

* My build commands are my regular compiling commands except I minify on build only.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.