SASSmarkup~10 mins

File architecture patterns (7-1 pattern) in SASS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - File architecture patterns (7-1 pattern)

[Read main.scss] -> [Import _variables.scss] -> [Import _mixins.scss] -> [Import _base.scss] -> [Import _layout.scss] -> [Import _components.scss] -> [Import _pages.scss] -> [Import _themes.scss] -> [Compile all into one CSS file]

The browser reads the main Sass file which imports seven partial files, then compiles them into a single CSS file for styling the webpage.

Render Steps - 4 Steps

Code Added:@import 'abstracts/variables';

Before

[No styles applied]
[Header]
[Main]
[Footer]

→

After

[Colors and fonts defined but not visible yet]
[Header]
[Main]
[Footer]

Variables for colors and fonts are loaded but do not change the page appearance yet.

🔧 Browser Action:Reads variables, stores values for later use

Code Sample

This code compiles multiple Sass partials into one CSS file that styles the header, main content, and footer with organized structure.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>7-1 Pattern Example</title>
</head>
<body>
  <header class="site-header">Welcome</header>
  <main class="content">Content here</main>
  <footer class="site-footer">Footer info</footer>
</body>
</html>

SASS

// main.scss
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'base/base';
@import 'layout/layout';
@import 'components/buttons';
@import 'pages/home';
@import 'themes/theme';

Render Quiz - 3 Questions

Test your understanding

After importing _base.scss (render_step 2), what visual change happens?

AButtons get hover effects

BFonts and background colors apply to all page elements

CVariables become visible colors

DPage layout changes with margins

Common Confusions - 3 Topics

Why don't variables in _variables.scss change anything by themselves?

Variables only store values; they don't apply styles until used in other files like base or components (see render_step 1).

💡 Variables are like paint colors in a palette—they don't color the wall until you use them.

Why does importing _base.scss change the whole page style?

Base styles set fonts and backgrounds globally, affecting all elements (see render_step 2).

💡 Base styles are like setting the room's wallpaper and floor before adding furniture.

Why do components styles only affect buttons and not the header or footer?

Component files target specific UI parts like buttons, so only those elements change (see render_step 4).

💡 Component styles are like decorating just the chairs, not the whole room.

Property Reference

Folder	Purpose	Example Files	Visual Effect
abstracts	Variables, mixins, functions	_variables.scss, _mixins.scss	Defines reusable values, no direct visual output
base	Global base styles	_base.scss	Sets fonts, resets, backgrounds for all elements
layout	Page structure styles	_layout.scss	Positions header, footer, main with spacing
components	UI components	_buttons.scss, _cards.scss	Styles buttons, cards, navigation visually
pages	Page-specific styles	_home.scss, _about.scss	Custom styles for individual pages
themes	Color themes	_theme.scss	Changes colors and backgrounds for themes
vendors	Third-party styles	_normalize.scss	Resets and normalizes browser styles

Concept Snapshot

7-1 Pattern organizes Sass files into 7 folders + 1 main file. Folders: abstracts, base, layout, components, pages, themes, vendors. Main.scss imports partials, compiles into one CSS file. Variables and mixins store reusable code, base sets global styles. Layout controls page structure, components style UI parts. This keeps styles clean, modular, and easy to maintain.