Separating SCSS and CSS files

Question

This is my website folder structure:

/images
/fonts
/js
/styles /    
        scss/
            |
            |– utilities/
            |   |– variables.scss  
            |
            |– base/
            |   |– reset.scss       
            |   |– typo.scss        
            |
            |– pages/
            |   |– index.scss       
            |   |– page1.scss            
            |
            – main.scss            

        css/ 
            // Save CSS Here

index.html

Description:

I have a root folder, contains index.html and few folders, like fonts, js, styles... In the styles folder, there's two folder, scss and css. and in the scss folder, there's main.scss (which contains all the scss -imported-), and few folders with scss files, like: base, utilities, pages...

The Problem:

When I create a scss files the compiler creates the css and css.map in the same folder of the scss file that been created. For example, after creating variables.scss it'll look like this:

|– utilities/
            |   |– variables.css   
            |   |– variables.css.map   
            |   |– variables.scss   

The Question:

I'd like to have the CSS files saved in new folders (Same for Sass but in the CSS folder). How can I separate the two types of files in different folders to look exactly like the example below?

What I'm Trying To Achieve:

/images
/fonts
/js
/styles /    
        scss/
            |
            |– utilities/
            |   |– variables.scss  
            |
            |– base/
            |   |– reset.scss       
            |   |– typo.scss        
            |
            |– pages/
            |   |– index.scss       
            |   |– page1.scss            
            |
            – main.scss            

        css/ 
            |
            |– utilities/
            |   |– variables.css
            |
            |– base/
            |   |– reset.css
            |   |– typo.css
            |
            |– pages/
            |   |– index.css
            |   |– page1.css
            |
            – main.css

index.html

EDIT (Note):

Using LiveSassCompiler to change the generated file location and using the _ when naming the files to prevent generating all the files doesn't help. I need both folders and the nested files (generated CSS files). Check the What I'm Trying to Achieve example above.

Answer 1

i suggest using live sass compiler for transpiling scss files for trying this : go to

menu- file>preferences>settings>extension>live sass copile config>edit in settings.json

and paste this: (your save path can be customized)

"liveSassCompile.settings.formats": [
{
  "format": "expanded",
  "extensionName": ".css",
  "savePath": "./css/"
}

]