0
0
SASSmarkup~5 mins

Component-based file organization in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Component-based file organization helps keep your styles neat and easy to find. It breaks your CSS into small parts that match parts of your webpage.

When your website has many parts like header, footer, buttons, and cards.
When you want to work with a team and keep styles organized.
When you want to reuse styles for similar parts across pages.
When your stylesheets become too big and hard to manage.
When you want to update one part without breaking others.
Syntax
SASS
// Example folder structure

styles/
  ├─ components/
  │    ├─ _button.scss
  │    ├─ _card.scss
  │    └─ _header.scss
  ├─ main.scss

// In main.scss
@use 'components/button';
@use 'components/card';
@use 'components/header';

Files starting with an underscore (_) are partials. They don't create CSS on their own.

Use @use to include partials in your main stylesheet.

Examples
This file styles buttons. It is saved as a partial with an underscore.
SASS
// _button.scss
.button {
  background-color: blue;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}
Main file includes the button styles and adds general body styles.
SASS
// main.scss
@use 'components/button';

body {
  font-family: Arial, sans-serif;
}
Header styles are kept separate for easy updates.
SASS
// _header.scss
.header {
  background-color: lightgray;
  padding: 2rem;
  text-align: center;
}
Sample Program

This example shows a simple webpage using component-based Sass files. The header and button styles are in separate files. The main.scss file includes them both. This keeps styles clean and easy to update.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Component-based Sass Example</title>
  <link rel="stylesheet" href="styles/main.css" />
</head>
<body>
  <header class="header">
    <h1>Welcome</h1>
  </header>
  <button class="button">Click me</button>
</body>
</html>

/* styles/components/_button.scss */
.button {
  background-color: #007bff;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
}

/* styles/components/_header.scss */
.header {
  background-color: #f0f0f0;
  padding: 2rem;
  text-align: center;
  font-family: Arial, sans-serif;
}

/* styles/main.scss */
@use 'components/button';
@use 'components/header';
OutputSuccess
Important Notes

Keep each component focused on one part of the page for easy reuse.

Use clear names for your partial files to find them quickly.

Remember to compile your Sass files to CSS before using them in HTML.

Summary

Component-based file organization breaks styles into small, manageable parts.

Use partial Sass files with underscores and include them in a main file.

This method makes your styles easier to maintain and reuse.