What is ITCSS methodology with SASS?

SASSmarkup~5 mins

ITCSS methodology with SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

ITCSS helps organize CSS in a clear way so styles don't get messy. Using SASS with ITCSS makes writing and managing styles easier and faster.

When your website styles start to get big and hard to manage.

When you want to keep your CSS organized by layers.

When working with a team to avoid style conflicts.

When you want to reuse styles easily with variables and mixins.

When you want to write CSS that is easier to maintain and update.

Syntax

SASS

// ITCSS folder structure example

// 1. Settings: variables, colors, fonts
// _settings.scss

// 2. Tools: mixins, functions
// _tools.scss

// 3. Generic: resets, box-sizing
// _generic.scss

// 4. Elements: basic HTML elements styles
// _elements.scss

// 5. Objects: reusable components, layout
// _objects.scss

// 6. Components: specific UI parts
// _components.scss

// 7. Utilities: helpers, helper classes
// _utilities.scss

// main.scss
@use 'settings';
@use 'tools';
@use 'generic';
@use 'elements';
@use 'objects';
@use 'components';
@use 'utilities';

Each layer builds on the previous one, from general to specific.

SASS partial files start with an underscore (_) and are imported into a main file.

Examples

Define colors and fonts as variables to reuse them easily.

SASS

// _settings.scss
$primary-color: #3498db;
$font-stack: 'Arial, sans-serif';

Create a mixin to center content with flexbox.

SASS

// _tools.scss
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

Reset default browser styles for consistency.

SASS

// _generic.scss
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Style a button using variables and mixins from earlier layers.

SASS

// _components.scss
.button {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  @include center-flex;
}

Sample Program

This example shows a simple webpage with a styled button. The styles are organized using ITCSS layers in one SASS file. Variables and mixins make the code easy to read and reuse.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ITCSS with SASS Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <button class="button">Click Me</button>
</body>
</html>

/* styles.scss */

// 1. Settings
$primary-color: #3498db;
$font-stack: 'Arial, sans-serif';

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

// 3. Generic
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

// 4. Elements
body {
  font-family: $font-stack;
  background-color: #f0f0f0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 5. Objects
// (empty for this example)

// 6. Components
.button {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  @include center-flex;
  font-size: 1.25rem;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: darken($primary-color, 10%);
}

// 7. Utilities
// (empty for this example)

OutputSuccess

Important Notes

ITCSS helps keep styles predictable and easy to find.

Use SASS features like variables and mixins to avoid repeating code.

Start with general styles and move to specific ones to avoid conflicts.

Summary

ITCSS organizes CSS into layers from general to specific.

SASS makes writing and managing these layers easier with variables and mixins.

Using ITCSS with SASS helps keep your styles clean, reusable, and easy to maintain.