Sass assistance pretty please

I don’t need a lot of assistance, the Sass is done, the site is almost done, but I have a lot of css files after compiles as I had separate ones for different things. Is there a way to combine these using @Import or @Use or something? I’ve been experimenting, but the extention combined.css I think messes it up, not sure, could definitely be user error lol.

Any assistance here would be highly appreciated. Thanks in advance!

Well I don’t know how the heck I even thought to do this but it worked! I had tried everything I could think of, and no matter what all the files would show up in CSS links in the code. So, Here’s what I had to do in case anyone else is wondering how:

I have 9 SCSS files, some for specific pages and some for specific components. I have 3 SASS Partials for colors, fonts and mixins. I didn’t have to do anything to the partials, but …

For the SCSS files I first did a @import of each of the 9 SCSS files into one main SCSS file like so:

@import ‘path/filename.scss’

Make sure they are listed in the @imports in the order you want them to show up in the CSS file. This is not the same as the include order.

I then had to turn the visibility off for each of the SCSS files that were imported (this was more of a pain than the rest lol). To do this I just right click the SCSS file, choose Visibility and set it to “Show on all pages except” and put a check in the ALL box at the top.

That’s it, now all my SCSS files are still exported so that they combine, but they are imported to the one SCSS file so only that one is linked in the head now.

Hope that helps someone, took me too long to figure that part out. Maybe @Martin can get something added to the Docs on it.

Also, if this is “Not” the correct way, someone please please please tell me the right way. Thanks! :slight_smile:

Hi Jo-r I’m no expert but from what i rememeber when I was learning SASS, I’d have all the imports in my main SASS stylesheet. All the other SASS filenames started with an underscore and wouldn’t be compiled as seperate CSS files. The main scss file gets copiled as along with the imports as one big stlyes.css. If you take away the underscore from the scss file names they get compiled into their own CSS file.

Ps. If I’m using SASS i write and edit in Visual Studio Code and the Live Sass Compiler extension

Hiya @floydmanfloyd thanks for that info. I think I must have it right then because that sounds like what I did. The part that wracked me up was that it kept compiling and using all the other SCSS files (using meaning that they were still included in the links in the Head, even though I had imported them. Wracked my brain to figure out how to get that to not do that. Sounds like there’s a couple ways then to do this.

I used the Underscore in front of the file if it was partials so I only had 3 of them, fonts, mixins and colors and the rest I left as normal SCSS files because I have one of those sites that basically needed a different style setup for almost all of the pages lol. I actually learned a lot with having to brainstorm this because I really thought that the Visibility meant it wasn’t hidden, but now I get it lol, it’s not hidden, it’s just not visible to that page so it still exports the files.

The visibility making them “all” invisible was the trick for me though. It still exports them in case you need them for any other pages, and they are still compiled into a separate folder, but … they aren’t part of the Links in the Head of the pages and that was what I needed to figure out.

I knew there had to be a way to combine them all into one, but the tutorials couldn’t work because of how BSS handles the exports, that was the tricky part.

I hadn’t thought about using all the other pages as Partials. Is that a thing? Doesn’t hurt anything to do that? I guess I just assumed it was that it would only “use” the contents rather than import them.

Lots to learn yet here, but I have come a very long way with this project and will be back paddling now to practice on some of my other sites. It’s actually quite fun!

Yeah SASS is cool once you get to grips with it. Some of the advanced stuffs pretty clever. I don’t know if you use VS Code or not. If you don’t I’d highly recommend it. It works great along side Studio for editing custom code html, css, sass, javascript, json and jquery :+1:

Yeah I use VS Code as well. Tried it with a few others, but VS Code definitely seems to be the best so far with BSS. Just gotta remember to “save” code before saving project lol, that’s the worst thing so far that I’ve come across so that’s not so bad :slight_smile:

You can click the manage cog bottom left - settings and type in auto save. You can then set to auto save after a delay you can set.

Also the format on saves a handy feature

Cool, thanks much I’ll definitely check out those settings :slight_smile: