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.

It's really going to depend on your Sass Compiler. Check out this GitHub thread [here](https://github.com/ritwickdey/vscode-live-sass-compiler/issues/84#issuecomment-411841424) for VSCode LiveSassCompiler — Calvin Bonner, Jul 16 '21 at 18:00
Also, for include-only `.scss` docs, consider adding an underscore before the filename to prevent it being compiled on it's own instead of as part of the main `.css` doc. (`_variables.scss` instead of `variables.scss`). Check out [this thread](https://stackoverflow.com/questions/34889962/why-put-in-front-of-the-file-name-or-in-scss-css) for more info. — Calvin Bonner, Jul 16 '21 at 18:03

score 6 · Answer 1 · answered Jul 16 '21 at 18:32

6

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/"
}

]

answered Jul 16 '21 at 18:32

rozhan

321
1
3
12

I'd like to have the CSS files saved in new folders as in the example above. (Same for Sass but in the CSS folder) – 001 Dec 19 '22 at 13:42

score 0 · Answer 2 · answered Oct 30 '21 at 09:55

0

You need to rename the files you don't want to generate a CSS to have a underscore "_" before the name. And don't worry you don't need to change the name in the imports, SASS do that to you.

So your variables file would be _variables.scss

answered Oct 30 '21 at 09:55

teefars

612
4
13

I know, adding "_" underscore won't generate new files, BUT I need the CSS files saved in new folders as in the example above. (Same for Sass but in the CSS folder) – 001 Oct 31 '21 at 12:57
Sorry then, I misunderstood the question. In this case depends on the compiler, with node Gulp and Ruby that is default behaviour, which compiler are you using? – teefars Nov 02 '21 at 10:19