Absolutely! Let’s explore SASS Variables — a core feature that makes your CSS more powerful and maintainable.
🎨 What Are SASS Variables?
SASS variables are used to store values like colors, font sizes, spacing, or breakpoints so you can reuse them across your styles.
✅ They start with a
$and make CSS cleaner, consistent, and easier to update.
🔧 Basic Syntax
✅ Easy to reuse and change later!
🧠 Why Use Variables?
💡 Change in one place, update everywhere
🖌️ Maintain a consistent design system
🧼 Cleaner code and fewer typos
📁 Organizing Variables
It’s common to group variables by type in a _variables.scss file:
Then import in your main SASS file:
📱 Media Query Variables
🔁 Use with Functions
You can use math with +, -, *, / on variables.
✅ Best Practices
| Tip | Why it matters |
|---|---|
| Use meaningful names | Easier to read and maintain |
| Group by type (color, size) | Keeps things organized |
| Prefix custom variables | Avoid name clashes |
| Keep in a separate file | Modular and reusable |
🧪 SASS vs CSS Variables?
| Feature | SASS Variables | CSS Variables (--var) |
|---|---|---|
| Processed by | Preprocessor | Browser at runtime |
| Scope | File-level / global | Cascade / scoped |
| Dynamic? | ❌ No (compiled) | ✅ Yes |
Use SASS for static styling logic, CSS vars for theming & dynamic styles.
✅ Summary
| Feature | SASS Variables |
|---|---|
| Syntax | $name: value; |
| Reuse | Across all stylesheets |
| Useful for | Colors, spacing, fonts, sizes, breakpoints |
| Key benefit | DRY code and easy global updates |
