I was just curious if it is normal for BSS with the Sass plugin to compile your "main.compiled.css" file as one gigantic line of code. I'm not talking about all of my scss files being compiled, but the actual formatting of the compiled code itself.
When opening in a text editor outside of BSS my "main.compiled.css" looks like this:
Before the SASS plugin, the css files would stay in a very clean, well-formatted state, but now every time I export it's just this huge line. Is anyone else seeing this, or is there something I may have missed that would cause the export to look this way? My html file is still tidy upon exporting, but the "main.compiled.css" is quite monstrous and when I pass this off to the engineers, I'd rather not have to clean it myself or make them delve into such a poorly formatted file.
It's called Minification. https://blog.stackpath.com/glossary/minification/
It is used to make the file smaller in size so that it takes less time to download so your page loads a little faster. There are tools online you can use to reformat it after exporting your site if you would like. https://www.cleancss.com has a beautifier tool https://www.cleancss.com/css-beautify/. You copy the contents of your CSS file in to the first box or upload a file or load a url. Then click the CSS Formatter button and the second box displays the beautified CSS that you can copy paste into your exported file if you would like.
I don't know that there is a setting that effects that for the SCSS file, maybe it can be requested that it's tied to the setting for using minified CSS/JS for the project?
Check your export settings, you most likely have minification turned on for those files. Turn it off and you'll be fine, it's not exactly the most stable system as of yet from what I've seen and have seen others post on it.
Granted, minification is a good thing, but I'd rather run files through a minifier site after exporting than trying to clean them up with a beautifier, to be sure the exported files are in good form. Not trusting on the minification system in BSS yet after the last time really boggled my files lol.
http://www.cssburner.com/views/ - to view errors and wasted coding
http://css.github.io/csso/csso.html - organize and reduce code from what I find in cssburner
http://refresh-sf.com/ - to organize and reduce code and minimize from what I find in cssburner and csso and then copy paste into cssburner and start over again through the cycle
I also use https://www.cleancss.com/ to both format and minimize CSS to use in comparison with cssburner and csso.
will copy/paste over and over through all of them until cssburner has no errors etc.. and csso can't find any reduction to gain in code.
I also have a bookmarklet to use on the homepage to get the critical CSS (above the fold CSS). Which I might then also use through all the sites as well, maybe.
The thing that confuses me is that minification is/was not turned on when I exported my project. In fact, I've never made use of BSS Minify option, so it's odd that it is doing that. Perhaps BSS always minifies your CSS when you use SASS? I don't know.
I will certainly make use of the links you've provided Saj. I appreciate your detailed help and all the info for each link.
Again, thank you both! Looks like minified CSS with SASS is just something we have to work with for now.
Sorry for the confusion! The output of the SASS compilation is indeed minified. This is the default preference of the SASS module that we use, and we haven't considered that people would actually want to edit this after exporting.
Just out of curiosity, why is it necessary for you to work with the compiled CSS? Maybe there is some other usability issue that we should be addressing.
That's a good point Martin, and for me it's so I can look through the files to see what I may need to clean up, remove, etc. I can't do that with the minified in anything. I also like to compare the code I may have in another site to one I've done in BSS and there again cannot do that with minified code. I don't tend to edit much of anything outside of BSS myself, so far I've done well with that for over a year and a couple dozen clients so it's working great for me on that. But I do like to have the ability to actually read the code that is being used for lots of other purposes.
Other than that, what's the point of having a check box for whether or not it will be minified, if it's just going to ignore our preferences? :P Would be nice if that preference were to work as expected.
No worries! I may or may not be using BSS for more unconventional uses. so I don't think it is an oversight per say to have SASS compilation outputs minified.
So, like Jo mentioned above it's nice to be able to look at and clean up/edit the code outside of BSS or compare it to earlier versions of my projects and/or other projects.
Besides that, I am using BSS to take design mockups from Adobe XD that my team makes, and then use those as a visual guide to create a Bootstrap mockup of the webpage. In doing this, we are hoping that our design iterations are being "translated" as closely as possible with the care of a sort of technical artist (myself) ensuring that details aren't overlooked/avoided/sacrificed and then we export the code from BSS and send it over to our engineers.
So we basically do front-end programming with a heavy design focus initially, and then toss that code to the engineers so they can focus more on the beep and boops and server stuff as opposed to the design and look. We like to have the code totally readable and accessible to them since we have very particular methods of handling our servers and will always need to heavily edit and make changes to certain bits of the code to ensure things run smoothly for their process of plugging in the exported code to all of the fiddly back-end stuff.
So, I guess in short it would be that BSS is the first half of our process and having the not-minified code is important because more editing needs to be done after our BSS phase. Hope that makes sense!
But with all that in my previous comment being said, having the ability to export SASS compiled BSS projects without it minifying it would certainly help lessen my workload and make me very happy. :)
Thank you for the input! We made a small correction to bstudio-sass and now the result of the compilation is formatted as you expect. Just run npm update bstudio-sass -g to get the new version. There is no need to update Bootstrap Studio itself, because SASS compilation is entirely handled in bstudio-sass.
Hi Martin, is there going to be an option to re-enable minification when exporting? I'm asking because I'd like to have that when exporting and the removal of comments etc... like I was doing before. It is nice to have formatted when development for comparison reason but production release would be nice to have it cleaned up.
I've been trying to follow https://css-tricks.com/sass-style-guide/#article-header-id-16 so I've been very verbose with comments and I'm still pretty new to SASS so I try to make as much sense to what I'm doing in the comments etc...
Are there any plans to add support for using an auto prefixer so that we won't need to write vendor prefixers ourselves? Unless someone has a good mixin for that :)
Thanks for the comment, @Saj! The compiled SASS code obeys the minification setting in the Export tab. So you can bundle all CSS/compiled SASS into a single min.css file when you need to minimize file size.
Adding auto prefixer is a good idea. Some kind of switch to activate it would be needed though. Maybe we should add this to the SASS tab.