Index files for folder imports in SASS - Mini Project: Build & Apply

Index Files for Folder Imports in Sass

📖 Scenario: You are working on a web project with multiple Sass files organized in folders. To make importing styles easier and cleaner, you want to create an _index.scss file that imports all Sass files in a folder. This way, you can import just the index file instead of each individual file.

🎯 Goal: Create an _index.scss file that imports all Sass files in a folder, so you can simplify your Sass imports in other files.

📋 What You'll Learn

Create a folder named components with three Sass files: _buttons.scss, _cards.scss, and _modals.scss.

Create an _index.scss file inside the components folder.

In the _index.scss file, import the three Sass files using the correct import syntax.

Use the _index.scss file to import all components in a main Sass file.

💡 Why This Matters

🌍 Real World

Web developers often organize Sass files in folders and use index files to simplify imports and keep code clean.

💼 Career

Knowing how to structure Sass projects and use index files is a common skill required in front-end development jobs.

1

Create Sass files in the components folder

Create a folder named components. Inside it, create three Sass files named _buttons.scss, _cards.scss, and _modals.scss. Each file should contain a simple style rule with a unique class name: .button, .card, and .modal respectively.

SASS

# Create the folder and files with these contents:

# _buttons.scss
.button {
  background-color: blue;
}

# _cards.scss
.card {
  border: 1px solid black;
}

# _modals.scss
.modal {
  display: none;
}

Need a hint?

Each file should start with an underscore and have a unique class with a simple style.

2

Create the _index.scss file to import all components

Inside the components folder, create a file named _index.scss. In this file, write three @use statements to import _buttons.scss, _cards.scss, and _modals.scss using relative paths without the underscore and file extension.

SASS

# _buttons.scss
.button {
  background-color: blue;
}

# _cards.scss
.card {
  border: 1px solid black;
}

# _modals.scss
.modal {
  display: none;
}

# Create _index.scss below
# Your code here

Need a hint?

Use @use "./filename"; without underscore or extension to import Sass files.

3

Create a main Sass file to import the components index

Create a main Sass file named main.scss at the root level. In this file, write a single @use statement to import the components/_index.scss file using the relative path "./components/index".

SASS

# _buttons.scss
.button {
  background-color: blue;
}

# _cards.scss
.card {
  border: 1px solid black;
}

# _modals.scss
.modal {
  display: none;
}

# _index.scss
@use "./buttons";
@use "./cards";
@use "./modals";

# main.scss
# Your code here

Need a hint?

Import the index file with @use "./components/index"; in main.scss.

4

Verify the import structure is complete

Ensure all Sass files are correctly imported: main.scss imports components/_index.scss, which imports _buttons.scss, _cards.scss, and _modals.scss. Confirm the import statements use @use with correct relative paths and no file extensions or underscores.

SASS

# _buttons.scss
.button {
  background-color: blue;
}

# _cards.scss
.card {
  border: 1px solid black;
}

# _modals.scss
.modal {
  display: none;
}

# _index.scss
@use "./buttons";
@use "./cards";
@use "./modals";

# main.scss
# Verify and complete the import statements if needed
# Your code here

Need a hint?

Check that all import statements are present and correctly formatted.