SCSS Variables

Variables in SCSS offer an effective way to organize and reuse values in your stylesheets. Using variables, you can maintain consistency and streamline updating by consolidating values such as colors, fonts, and other CSS attributes. This tutorial will guide you through the fundamentals of using variables in SCSS, covering their purpose, declaration, and practical examples.

What are SCSS Variables?

In SCSS, a variable is a named storage for data that you can reuse throughout your stylesheet. Variables are useful for storing values ​​you use frequently, such as colors, font sizes, and spacing units. They help maintain consistency and make it easier to update values ​​globally.

Syntax for Declaring Variables

The syntax for declaring a variable in SCSS is simple: use the $ symbol, followed by the variable name and the value you want to assign.

Syntax:

$variable-name: value;

Example:

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;

You can then use these variables throughout your SCSS file:

body {
    font-family: $font-stack;
    color: $primary-color;
}

Implementing Variables in SCSS

Let us learn how to declare and use variables in SCSS with practical examples.

Defining Variables

First, define your variables at the top of your SCSS file or in a separate _variables.scss file that you have to import into your main stylesheet.

Example:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica Neue', sans-serif;
$base-padding: 16px;

Using Variables in Selectors

Once variables are defined, you can use them within your selectors to keep your styles consistent.

Example:

body {
    font-family: $font-stack;
    background-color: $primary-color;
    padding: $base-padding;
}

h1 {
    color: $secondary-color;
}

Advanced Use of Variables

Using Maps for Complex Variables

SCSS maps allow you to group related variables for more complex scenarios. This method is beneficial for themes or sets of related styles.

Example:

$spacing: (
    small: 8px,
    medium: 16px,
    large: 24px
);

.container {
    padding: map-get($spacing, medium);
}

.card {
    margin-bottom: map-get($spacing, large);
}

Output:

.container {
    padding: 16px;
}

.card {
    margin-bottom: 24px;
}

Theming with Variables

Using variables, you can easily create a theming system for your application.

Example:

// Define theme variables
$theme-dark-bg: #2c3e50;
$theme-dark-text: #ecf0f1;
$theme-light-bg: #ecf0f1;
$theme-light-text: #2c3e50;

// Apply themes
body {
    &.theme-dark {
        background-color: $theme-dark-bg;
        color: $theme-dark-text;
    }

    &.theme-light {
        background-color: $theme-light-bg;
        color: $theme-light-text;
    }
}

Output:

body.theme-dark {
    background-color: #2c3e50;
    color: #ecf0f1;
}

body.theme-light {
    background-color: #ecf0f1;
    color: #2c3e50;
}

Managing Breakpoints for Responsive Design

You can also use variables to manage breakpoints for responsive design.

Example:

// Define breakpoints
$mobile-breakpoint: 480px;
$tablet-breakpoint: 768px;

// Use breakpoints
.container {
    width: 100%;

    @media (max-width: $mobile-breakpoint) {
        width: 90%;
    }

    @media (max-width: $tablet-breakpoint) {
        width: 95%;
    }
}

Output:

.container {
    width: 100%;
}

@media (max-width: 480px) {
    .container {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }
}

Conclusion

This tutorial taught you how to use variables in SCSS to streamline your CSS workflow, making stylesheets more manageable and consistent. Implement these techniques in your next project to see their benefits.