Index files for folder imports in SASS

Introduction

Index files help organize and simplify importing many Sass files from a folder. They make your code cleaner and easier to manage.

When you have many Sass partial files in a folder and want to import them all at once.

When you want to keep your main Sass file clean by importing just one index file.

When you want to group related styles together and import them as a single unit.

When you want to avoid writing multiple import statements for each Sass file.

When you want to improve project structure and readability.

Syntax

SASS

@use 'folder-name';

// Inside the folder, create an _index.scss file that imports other partials:
@use 'buttons';
@use 'cards';

The _index.scss file acts as a central place to import all other Sass files in the folder.

When you import the folder, Sass automatically looks for the _index.scss file.

Examples

This index file imports three partials: buttons, cards, and typography.

SASS

// _index.scss inside styles folder
@use 'buttons';
@use 'cards';
@use 'typography';

In your main Sass file, you import the whole styles folder at once using the index file.

SASS

@use 'styles';

Sample Program

This example shows how to create an index file that imports buttons and cards partials. Then the main file imports the styles folder using the index file.

SASS

// Folder structure:
// styles/
//   _buttons.scss
//   _cards.scss
//   _index.scss

// _buttons.scss
.button {
  background: blue;
  color: white;
}

// _cards.scss
.card {
  border: 1px solid gray;
  padding: 10px;
}

// _index.scss
@use 'buttons';
@use 'cards';

// main.scss
@use 'styles';

Important Notes

Always prefix partial Sass files with an underscore (_) so they are not compiled separately.

Index files help reduce the number of import lines in your main Sass files.

Summary

Index files group multiple Sass partials for easier imports.

Use _index.scss to import all files in a folder.

Import the folder once in your main file to include all styles.