How to name a Sass file containing only @import statements

Question

How should one name a Sass file that has the sole purpose of importing other Sass files?

Are there any rules or general "industry standards" that apply to this?

Let's suppose we have the following file structure:

sass/
|-- global/
|   `-- file.sass
`-- vendor/
    `-- bootstrap/
        |-- variables.sass
        `-- mixins.sass

and file.sass under global/ contains only

@import "../vendor/bootstrap/variables";
@import "../vendor/bootstrap/mixins";

How should file.sass be named?

Is it bootstrap.sass or bootstrap-loader.sass? Or something else?

I couldn't find any relevant post or documentation that addresses this matter except this Stack Overflow thread: Sass @Import rules and naming which is somewhat similar but it doesn't cover my question.

Please support your answer with arguments / examples if possible.

Answer 1

It would all depend on how you intend to compile your scss in the project, and how the workflow of the project works.

Typically you would use "Partial" scss files for anything that you don't want compiling separately.

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive. Source: https://sass-lang.com/guide

A basic typical workflow inside a project may look like the follow.. (Depending on how much scope the project has):

Src (Folder)
-- JS (Folder)
--Scss (Folder)
   -- Components (Folder)
       -- _button.scss
       -- _animation.scss
   -- Pages Folder
       -- cms (Folder)
          -- _about.scss
          -- _contact.scss
-- _components.scss
-- _source.scss
-- default.scss

Inside _source.scss: Import all cms page partials/other..

@import
'pages/cms/button',
'pages/cms/animation';

Note: You do not need to use an underscore before the file names in this import.

Inside _components.scss: Import all partial component files.. (Same as source)

You would then import these into a file which you want to be compiled.. (No underscore file name):

default.scss:

@import
'components';


@import
'source';

I hope this answers your question.

Answer 2

The primary CSS/Sass file is usually called main.scss/main.css or style.scss/style.css.

Citing thesassyway.com here's how the structure looks like:

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

In an enterprise-level project where multiple sub-projects are bundled you can name and divide your primary file into different files and name them after each project.

stylesheets/
|
|-- admin/           # Admin sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # CSS or Sass from other projects
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # Primary stylesheets for each project
|-- account.scss
`-- site.scss