SASS related: custom.scss vs individual scss file

0
Why when some projects are created, the sass gets merged into a custom.scss file and others it does not?  I prefer the latter that way when I am inspecting an element in the chrome dev tools I can see exactly where the block of code is and not where it was compiled into the custom.scss file.  When it’s not all merged into one custom.scss file it makes customizing the UI much simpler.   Bonus question. For projects where the sass is mapped into a single custom.scss file can it be changed?  I personally don’t like having a single scss file with 35k+ lines of code.   VS  
asked
3 answers
0

In both cases, the spacing-outer-bottom is taken from _spacing.scss. In your second example however the spacing-outer-bottom is also present in the custom.scss and this takes preference over the _spacing.scss. That is also the reason why it is showing _custom.scss in the inspector.

When making a modification to the styling it is common practice to only modify custom.scss and avoid modifying the templates themselves.

For the bonus question, projects that have the scss compiled into one single _custom.scss will still have their separate scss files in <projectdir>\theme\styles\web\sass\. So, if you have access to the project, you will be able to compile it into the usual .scss files in the usual separated scss files.

answered
0

not sure if this helps, but if your question is:

“why does sass generate a .css or when is it included in a giant .css?”

depending if you use an underscore infront of the .sass or not.

1 file:
styling.scss
_buttons.scss
_typography.scss

3 files:
styling.scss
buttons.scss
typography.scss

 

answered
0

I think custom.scss is when something hasn’t refreshed right.

I can always see the Sass root file and line number (unless something has bugged out)

not sure how or why, but I work with calypso and I think it has something to do with the port that is being used there.

answered