What are SCSS Variables?
SCSS variables let you store values like colors, fonts, spacing, shadows, and use them throughout your stylesheet. They help maintain consistency and make updates easier.
Example:
// SCSS
$primary-color: #0077ff;
$spacing: 16px;
$radius: 10px;
.button {
background: $primary-color;
padding: $spacing;
border-radius: $radius;
}
Output CSS:
/* CSS */
.button {
background: #0077ff;
padding: 16px;
border-radius: 10px;
}
Why variables are useful?
- Consistent design system
- Easy updates in one place
- Avoids repetition
- Clean and scalable architecture