Sass Variables

Posted in Sass Tutorial

Updated on Aug 29, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

Sass variables are a powerful feature that allows you to store values for later use in your stylesheets. They help in maintaining consistency across your styles and make it easier to update and manage design elements.

With variables, you can store values such as colors, font sizes, margins, and more, and use them throughout your stylesheet.

💡 Syntax

Sass variables are defined using the $ symbol followed by the variable name and value. Here’s the basic syntax:

Syntax

Copied

$variable-name: value;

🔢 Parameters

$variable-name: The name of the variable. It must start with a dollar sign ($).
value: The value assigned to the variable (e.g., a color, number, or string).

📚 Defining Variables

To define a variable in Sass, simply assign a value to it. Here are some common examples:

Syntax

Copied

$primary-color: #3498db;
$font-size: 16px;
$spacing: 10px;

🎁 Using Variables

Once defined, you can use variables anywhere in your Sass files. Here’s how you can incorporate them:

example.scss

Copied

body {
  color: $primary-color;
  font-size: $font-size;
  margin: $spacing;
}

🛍️ Benefits of Using Variables

Consistency: Ensure consistent use of colors, font sizes, and other design elements across your stylesheets.
Maintainability: Update values in one place, and the changes reflect throughout your stylesheet.
Readability: Make your code more readable and easier to understand by using descriptive variable names.

📝 Example Usage

Let’s look at a few examples to illustrate how Sass variables can be used in practice.

📜 Example 1: Basic Usage

example.scss

Copied

$background-color: #f5f5f5;
$text-color: #333;

.container {
  background-color: $background-color;
  color: $text-color;
}

In this example, the background color and text color are defined as variables and applied to the .container class.

📜 Example 2: Responsive Design

example.scss

Copied

$base-font-size: 16px;
$large-font-size: $base-font-size * 1.5;

h1 {
  font-size: $large-font-size;
}

Here, a base font size is defined and used to create a larger font size for the h1 element, demonstrating how variables can be used in calculations.

📜 Example 3: Color Palettes

example.scss

Copied

$primary-color: #3498db;
$secondary-color: #2ecc71;
$accent-color: #e74c3c;

.button {
  background-color: $primary-color;
  border-color: $secondary-color;
  color: $accent-color;
}

This example shows how to create a cohesive color scheme using variables for button styles.

🎉 Conclusion

Sass variables are an essential tool for managing and organizing your stylesheets. By storing values in variables, you enhance the consistency, maintainability, and readability of your code. Variables make it easy to apply global changes and ensure a unified design across your website or application.

Using Sass variables effectively allows you to create more dynamic and flexible stylesheets. Experiment with different variable values and see how they can streamline your styling process and improve your workflow.