1

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:

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.scss
            |
            |– pages/
            |   |– index.css
            |   |– page1.css
            |
            – main.css

index.html
001
  • 1,563
  • 3
  • 18
  • 2
    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
  • 3
    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

2 Answers2

3

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

]

rsh
  • 205
  • 1
  • 1
  • 10
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

teefars
  • 593
  • 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