Show original SCSS file reference in Style window

Had a nice conversation with @gabby who cleared up my question about if I was doing the visibility right or not. Duplicated pages change the visibility settings of scss files - #5 by jo-r
This led to the reason I was asking about it a few months ago:

You cannot see where the classes/id’s are originally coming from when you have all your SCSS files sent to the main SCSS file with the @use command. When this is done, all code is seen as coming from the main SCSS file you are pulling all the rest of the SCSS files into. Yes, this is great for not having a lot of HTTP Requests, but … it makes for a really bad reference system when we have to seek and search for that class that we need to edit and cannot find it (you can only organize so much lol).

So …

Is there any way that BSS can be change so that it shows us the original file the code is actually in? Kind of like on the right side of the Styles window where it shows us the file the code is being pulled from, clickable to go to that CSS/SCSS page. This wouldn’t have to be clickable, just a reference so we know what file the code is actually in. I hope I’m explaining this right, but mainly.

  1. All my scss files are being sent to a custom.scss file via the @use command so that there is only one SCSS file compiled with all the code from all the SCSS files.

  2. In the Styles window, after I turn visibility off for all pages on all the SCSS files except partials, all I ever get to see is the “custom.scss” as the file all the code is in.

  3. At least 2 times a week I have to hunt down a class because it could could be in any of a few scss files. Hard to organize so fine tuned that I know where I put every single class … I claim old fart lol. This being all because they all show in the Styles window as if they are all in the custom.scss file even though they are not.

Hopefully that helps explain better. It would be so helpful to at least have a reference to know what file that class came from.

1 Like

I’ve been thinking about this and it’s probably not something easily done since not everyone codes exactly the same and this would truly rely on much hand coding of SCSS files. If there’s anything at all that can be done to help this situation it would be great, but if it’s as horrendous as I’ve come to think it will be don’t worry about it.