Answers for "scss folder structure"

Create scss structure setup

sass/
|
|- abstracts/
|  |- _mixins             // Sass Mixins Folder
|  |- _variables.scss     // Sass Variables
|
|- core/
|  |- _reset.scss         // Reset
|  |- _typography.scss    // Typography Rules
|
|- components/
|  |- _buttons.scss       // Buttons
|  |- _carousel.scss      // Carousel
|  |- _slider.scss        // Slider
|
|- layout/
|  |- _navigation.scss    // Navigation
|  |- _header.scss        // Header
|  |- _footer.scss        // Footer
|  |- _sidebar.scss       // Sidebar
|  |- _grid.scss          // Grid
|
|- pages/
|  |- _home.scss          // Home styles
|  |- _about.scss         // About styles
|
|- sections/ (or blocks/)
|  |- _hero.scss          // Hero section
|  |- _cta.scss           // CTA section
|
|- vendors/ (if needed)
|  |- _bootstrap.scss     // Bootstrap
|
- app.scss                // Main Sass file

scss file structure

> scss
    > base
		> theme									
          |- _richBlue.scss
          |- ...
        |- __base-dir.scss					#Import all base .scss files
        |- _bootstrap.scss        
        |- _variables.scss

    > components
        |- __components-dir.scss			#Import all components .scss files
        |- _header.scss
		|- _ie.scss
        |- _liquid-design.scss
        |- ...

    > global
        |- __global-dir.scss				#Import all global .scss files
        |- _busyloader.scss
        |- _scrollbar.scss
        |- _utilities.scss
		|- ...

    > icomoon								#Additional third party folders
		> fonts
		|- demo.html
		|- style.css

	
    styles.scss					#Import all dir files and third party folders