SCSS divide stylesheets into partials

Let’s break that SCSS explanation into an example using partials, variables, and logic (loops, conditionals) to demonstrate exactly how SCSS improves modularity, reusability, and organization compared to plain CSS.

Get Ajay Solanki’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🧱 Project Structure

styles/
│
├── _variables.scss   // Partial for colors, font sizes, etc.
├── _buttons.scss     // Partial for button styles
├── _header.scss      // Partial for header styles
├── main.scss         // Main file that imports all partials

🪄 1. _variables.scss (Partial)

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Roboto', sans-serif;

🧩 2. _buttons.scss (Partial)

@import 'variables';

.button {
  font-family: $font-stack;
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: $secondary-color;
  }
}

🧠 3. _header.scss (Partial with logic)

@import 'variables';

$header-sizes: (h1: 32px, h2: 24px, h3: 18px);

@each $tag, $size in $header-sizes {
  #{$tag} {
    font-size: $size;
    font-family: $font-stack;
    color: $primary-color;
  }
}

🧷 4. main.scss (Entry point that compiles everything)

@import 'variables';
@import 'buttons';
@import 'header';

✅ Benefits Illustrated:

• ✅ Modular & Reusable: Styles are split into meaningful partials.
• ✅ DRY (Don’t Repeat Yourself): Reuse of variables, logic, and imports.
• ✅ Maintainable: You can change $primary-color in one place and update all styles that use it.
• ✅ Powerful Logic: The loop in _header.scss dynamically generates styles for h1, h2, h3.