Spacing Variable Usage

All margin and padding values MUST use centralized spacing variables ($unit__*, $offset__*). Ad hoc values like padding: 7px MUST NOT be used. Missing variables SHOULD be created in _variable.scss.

Introduction

This standard defines how spacing values (margins, paddings, gaps) MUST be applied using the centralized spacing system defined in _variable.scss.

Rules

All margin and padding values MUST use variables from the spacing system ($unit__*, $offset__*).
Ad hoc values like padding: 7px or margin: 13px MUST NOT be used.
If existing variables do not cover a specific need, a new variable SHOULD be created in _variable.scss rather than hardcoding a value.

Spacing Scale Reference

The project uses a modular spacing scale:

Base units: $unit__min (2px) → $unit__max (128px)
Offset variants: page, section, block, element, title, text
Responsive offsets: separate mobile and desktop values where necessary

Example

// CORRECT
.card {
  padding: $offset__element;
  margin-bottom: $unit__medium;
}

// WRONG
.card {
  padding: 15px;
  margin-bottom: 22px;
}