Need a little help with Sass issue

Webdesign Help
1

So, I’m kinda new at this, but it’s not rocket science so was doing OK until today. I had a hard time finding a good tutorial that also covered the @use system instead of the @import, but I think I finally found a good one. My issue is this:

I can get everything to work within BSS, including being able to @use specific files within folders as long as I put both the directory and the file name in the line such as:

@use 'directory/filename' as *;

I am using an _index file to put the @follows into for each of my partials. That seems to be working fine so far. which I have listed similar to:

@forward '/directory/filename';

But … according to this tutorial I’m using (I’ll link it below), I should be able to reference the directory only and it should pull in all files from it like so:

@use 'directory' as *;

My sass files & directories are as follows:

/main-sass
... custom.scss ----- @use "../sass-parts" as*
... styles.scss ----- @use "../sass-parts" as*

/sass-parts
... _colors.scss
... _fonts.scss
... _index.scss ----- @forward 'fonts'; and @forward 'colors';

In my styles and custom scss files I can get this to work:

@use "../sass-parts/fonts" as *;
@use "../sass-parts/colors" as *;

But I’m trying to get the folder wide setting to work as this:

@use "../sass-parts" as *;

I’ve tried every combo I can think of for the directory only listing and I cannot get it to work, I always get the error:

File to import not found: sass-parts.scss

It is always looking for a file instead of a directory. Any clue what I’m doing wrong here? Any help would be appreciated. I’m getting the basic ideas of how this all works, but unfortunately I didn’t know there were sass functions that were being deprecated and I learned the @import way first. This don’t seem like it should be all that hard, but this part has me stumped. Hopefully it’s an easy fix, not a bug after all the time I’ve spent trying to get it to work lol.

Tutorial I’m using is this one:

2

Also have another question for BSS. Is there a reason we cannot copy to the scss files using the right click menu? Kind of tedious to have to copy and paste manually from one place to another all the time. Am I missing something in the setup on this maybe?

4

Usually I would have a main imports.scss with all the stylesheets in sections then this would be the file the compiler would use to convert to css for deployment

// Main Styles
@import ‘main/style.scss’

// variables
@import ‘vars/colors.scss’

Then import the main imports.

Also if you are not making use of more advanced sass features then its best just to use css variables.

5

Yeah I can get the @import to work just fine, but everything I’m reading on Dart Sass says that Sass is doing away with the @import and they discourage using it. They say we should be using @use and @forward instead, to replace the @import setup. According to the newer information I have found it is or will be deprecated soon and eventually will no longer be supported at all.

I don’t use a lot of the more advanced features of Sass “yet” as I’m still learning it, but I would probably use it even if all I use it for is the colors and fonts and such as they don’t use HTTP requests which the CSS variables do, so I don’t mind using it for the small stuff for now. As I said, I’m still learning it, and finding it pretty cool, just not so cool within BSS for its lack of convenience and loss of features.

For now I’d just like to know if this setup for the Directory Listing above is supposed to work in BSS or not. I did try it outside of BSS and it works so I’m assuming something is missing in BSS for this feature.