Component-based file organization in SASS - Mini Project: Build & Apply

Component-based File Organization with Sass

📖 Scenario: You are building a simple website style using Sass. To keep your styles neat and easy to manage, you will organize your Sass code into separate component files.

🎯 Goal: Create a Sass project with separate component files for _buttons.scss and _header.scss, then import them into a main style.scss file.

📋 What You'll Learn

Create a partial Sass file named _buttons.scss with a button style.

Create a partial Sass file named _header.scss with a header style.

Create a main Sass file named style.scss that imports both partials.

Use proper Sass partial naming with underscore prefix.

Use @use or @import to include partials in style.scss.

💡 Why This Matters

🌍 Real World

Organizing styles into components helps teams work together and keeps code easy to maintain as projects grow.

💼 Career

Many front-end jobs require writing clean, modular CSS or Sass. Knowing how to organize styles into components is a key skill.

1

Create _buttons.scss partial

Create a Sass partial file named _buttons.scss with a style for a button class called .btn. Set the background color to #007BFF and the text color to #FFFFFF.

SASS

# Create a partial file _buttons.scss
// Add .btn class with background and color styles

Need a hint?

Remember to start the filename with an underscore to make it a Sass partial.

2

Create _header.scss partial

Create a Sass partial file named _header.scss with a style for a header class called .header. Set the font size to 2rem and the font weight to bold.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
}

// Create a partial file _header.scss
// Add .header class with font-size and font-weight styles

Need a hint?

Use the underscore prefix for the partial filename and add the styles inside the .header class.

3

Create main style.scss file

Create a main Sass file named style.scss. Use @use statements to include the _buttons.scss and _header.scss partials.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
}

.header {
  font-size: 2rem;
  font-weight: bold;
}

// Create style.scss
// Use @use to import _buttons and _header partials

Need a hint?

Use @use 'filename'; without the underscore or file extension to import partials.

4

Add namespace prefixes for imported partials

In style.scss, update the @use statements to add namespace prefixes btns for buttons and hdr for header. Then, add styles that use these namespaces to style .btn and .header classes.

SASS

@use 'buttons';
@use 'header';

// Add namespace prefixes btns and hdr
// Use btns and hdr namespaces to style .btn and .header

Need a hint?

Use @use 'filename' as prefix; to add namespaces. Then use @extend prefix.classname; to apply styles.