Answers for "how to import differrent styles for different files in scss"

scss import another file

// foundation/_code.scss
code {
  padding: .25em;
}

// foundation/_lists.scss
ul {
  text-align: left;
}

// style.scss
@use 'foundation/code';
@use 'foundation/lists';

// output styles.css
code {
  padding: .25em;
}

ul {
  text-align: left;
}

save css file to different folder in scss

/**
*Save css folder in different folder for scss
*copy the following code to setting=>extension=>live-scss-compiler=>edit setting.json
*and paste it there
*/
"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "./css"
    },
    {
      "extensionName": ".min.css",
      "format": "compressed",
      "savePath": "./css"
    }
  ],
  "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  "liveSassCompile.settings.generateMap": false,
  //autoprefix, will auto add perfix like -webkit- -moz-..
  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]