Sass Variables 🎯

Welcome to the exciting world of CSS customization with Sass! Today, we're diving deep into Sass variables. By the end of this tutorial, you'll be able to create reusable and maintainable CSS with ease. 💡

What are Sass Variables? 📝

In simple terms, Sass variables are placeholders for repeated values. Instead of writing the same color, font, or other CSS property multiple times, you can store these values in variables and reuse them throughout your project. This makes your code cleaner, more efficient, and easier to manage.

Why Use Sass Variables? 📝

Code reusability: By storing common values in variables, you can reuse them across your project, making your code cleaner and easier to maintain.
Easy changes: If you decide to change a color or font for your entire project, you only need to update the variable value instead of searching and changing every instance manually.
Consistency: Using variables ensures that you use the same colors, fonts, and other CSS properties consistently throughout your project.

How to Define Sass Variables 📝

Defining a Sass variable is as simple as assigning a value to a name.

scss

$primary-color: #3F51B5;

In the above example, $primary-color is the variable name, and #3F51B5 is the value. You can use this variable throughout your Sass file like this:

scss

.button {
    background-color: $primary-color;
}

Interpolation 📝

Sass also supports interpolation, which allows you to dynamically create CSS property values using variables.

scss

$font-size: 16px;

p {
    font-size: #{$font-size};
}

Nested Variables 📝

You can also nest variables within other variables. This is useful when you want to define complex values with multiple parts.

scss

$link-colors: (
    default: #3F51B5,
    hover: #2932FF
);

a {
    color: map-get($link-colors, default);

    &:hover {
        color: map-get($link-colors, hover);
    }
}

Quiz 🎯

Stay tuned for more on Sass features! 💡