1
\$\begingroup\$

I recently started using SASS and Compass in my projects. So far I am using the file structure shown below.

  sass/ 
    | 
    |– base/ 
    |   |– _reset.scss       # Reset/normalize 
    |   |– _typography.scss  # Typography rules 
    |   ...                  # Etc… 
    | 
    |– components/ 
    |   |– _buttons.scss     # Buttons 
    |   |– _carousel.scss    # Carousel 
    |   |– _cover.scss       # Cover 
    |   |– _dropdown.scss    # Dropdown 
    |   |– _navigation.scss  # Navigation 
    |   ...                  # Etc… 
    | 
    |– helpers/ 
    |   |– _variables.scss   # Sass Variables 
    |   |– _functions.scss   # Sass Functions 
    |   |– _mixins.scss      # Sass Mixins 
    |   |– _helpers.scss     # Class & placeholders helpers 
    |   ...                  # Etc… 
    | 
    |– layout/ 
    |   |– _grid.scss        # Grid system 
    |   |– _header.scss      # Header 
    |   |– _footer.scss      # Footer 
    |   |– _sidebar.scss     # Sidebar 
    |   |– _forms.scss       # Forms 
    |   ...                  # Etc… 
    | 
    |– pages/ 
    |   |– _home.scss        # Home specific styles 
    |   |– _contact.scss     # Contact specific styles 
    |   ...                  # Etc… 
    | 
    |– vendors/ 
    |   |– _bootstrap.scss   # Bootstrap 
    |   |– _jquery-ui.scss   # jQuery UI 
    |   ...                  # Etc… 
    | 
    | 
    `– main.scss             # primary Sass file 

I am happy with the file structure (unless anyone would like to comment on how it could be improved)

My issue is: I am not entirely sure what the best practice is for ordering my @Imports in Primary SCSS file.

I was wondering if anyone could advise me on the best way to import.

I have not yet put together my imports for this new file structure, yet I will show my imports for a previous project.

Previous Project's Primary SCSS file:

@import "partials/defaults";
@import "partials/typography";
@import "partials/grids";
@import "partials/buttons";
@import "partials/headers";
@import "partials/footers";

I want to know which practice is best for organizing my new file structure.

Any help or advice is appreciated.

\$\endgroup\$

closed as off-topic by Quill, Peilonrayz, syb0rg, mdfst13, Pimgd Jun 23 '16 at 13:35

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ slightly confused as to why my question is flagged as off topic, I was simply showing my structure and code and seeing if there was a cleaner or better alternative, maybe it's the way I worded it? \$\endgroup\$ – danjones_mcr Jun 23 '16 at 13:58
2
\$\begingroup\$

Your way works, but it is not very scalable, since you have to compile all the sass files every time you make a change, this is time consuming when the project gets bigger.

here you watch all the files via grunt/gulp, but only compile the _watchables, the _procompiled file is compiled upon start of server only, not during file watch.

when building for production, use build.scss to build the final css file, the build contains the watchables and precompiled files.

the _globals file will contain global configurations, styleguide variables, and functions/mixins. the global file does not have css in it, only utilities and functions, and is imported in both watchables and precompiled files.

Structure

.style
├── build.scss
├── _globals.scss
├── _watchables.scss
├── _precompiled.scss
├── vendors
|   ├── index.scss
|   └── _bootstrap.scss
├── helpers
|   ├── index.scss
|   └── _variables.scss

build.scss

@include '_globals.scss';
@include '_precompiled.scss';
@include '_watchables.scss';

_precompiled.scss

//contains vendor files and other unchanged scss files.
@include '_globals.scss';
@include 'vendor/_index.scss';

_watchables.scss

//contains the files you want to build everytime you save
@include '_globals.scss';
@include 'pages/homepage.scss';

any index.scss file

//include everything in the folder.
@include '_bootstrap.scss';

I developed this way while working on a big project with my company, the build time got reduced from 8ms per file save to less than a second. i was compiling only the pages folder in my watchables.scss file, since the rest of the files are almost always stable, but sometimes i include a component in my watchables to develop the component then put it back to the precompiled file.

\$\endgroup\$
  • \$\begingroup\$ I will try this, much appreciated. \$\endgroup\$ – danjones_mcr Jun 23 '16 at 13:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.