ITCSS methodology with SASS - Mini Project: Build & Apply

Build a Simple ITCSS Structure with SASS

📖 Scenario: You are working on a small website project. You want to organize your styles using the ITCSS methodology with SASS. ITCSS helps keep styles clean and easy to manage by layering them from general to specific.

🎯 Goal: Create a basic SASS file structure following ITCSS layers: Settings, Tools, Generic, Elements, and Objects. Write SASS code that shows variables, mixins, resets, base styles, and a simple object style.

📋 What You'll Learn

Create a SASS variable for the main color in the Settings layer

Add a mixin for a flex container in the Tools layer

Write a CSS reset rule in the Generic layer

Style the body element with the main color in the Elements layer

Create a reusable class .card with flex layout in the Objects layer

💡 Why This Matters

🌍 Real World

ITCSS helps developers keep CSS organized and scalable in real projects, making it easier to maintain and update styles.

💼 Career

Understanding ITCSS and SASS is valuable for front-end developers working on medium to large websites or apps where CSS organization is important.

1

Create the Settings layer with a color variable

Create a SASS variable called $main-color and set it to #3498db inside a comment block labeled // Settings.

SASS

// Settings
// Your code here

Need a hint?

Use $main-color: #3498db; to define the main color variable.

2

Add the Tools layer with a flex container mixin

Below the Settings layer, add a comment // Tools and create a mixin called flex-center that sets display: flex;, justify-content: center;, and align-items: center;.

SASS

// Settings
$main-color: #3498db;

// Tools
// Your code here

Need a hint?

Use @mixin flex-center { display: flex; justify-content: center; align-items: center; } to create the mixin.

3

Add the Generic layer with a CSS reset

Add a comment // Generic below Tools. Then write a CSS reset rule that sets margin and padding to 0 for all elements using the universal selector *.

SASS

// Settings
$main-color: #3498db;

// Tools
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Generic
// Your code here

Need a hint?

Use * { margin: 0; padding: 0; } to reset all elements.

4

Add Elements and Objects layers with body style and card class

Add a comment // Elements and style the body element to have background-color set to $main-color. Then add a comment // Objects and create a class .card that uses the flex-center mixin and sets height to 10rem and width to 15rem.

SASS

// Settings
$main-color: #3498db;

// Tools
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Generic
* {
  margin: 0;
  padding: 0;
}

// Elements
// Your code here

// Objects
// Your code here

Need a hint?

Use body { background-color: $main-color; } and .card { @include flex-center; height: 10rem; width: 15rem; }.