Sass Variables

Sass variables are one of the core features that make Sass (Syntactically Awesome Style Sheets) a powerful extension to CSS. By using variables, you can store and reuse values throughout your stylesheet, making your CSS more maintainable, consistent, and easier to read.

What Are Sass Variables?

Sass variables are placeholders for values you want to reuse in your stylesheet. They allow you to define variables for colors, fonts, sizes, and other values that are used multiple times, which can significantly reduce repetition and make your code easier to update.

Example:

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

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

Compiled CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
}

Benefits of Using Sass Variables:

• Consistency: Ensure consistent use of values across your stylesheet.
• Ease of Updates: Change a variable’s value in one place to update all instances.
• Readability: Improve the clarity of your styles by giving meaningful names to values.

How to Declare and Use Sass Variables

Declaring Variables:

In Sass, variables are declared with the $ symbol followed by the variable name and the value. You can declare variables for colors, fonts, sizes, and any other CSS value.

Syntax:

$variable-name: value;

Example:

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

Using Variables:

You can use variables anywhere in your stylesheet where you would use a regular value.

Example:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
  background-color: lighten($secondary-color, 20%);
}

Compiled CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
  background-color: #58d68d;
}

Advanced Variable Usage:

Variables in Functions

Variables can be used within Sass functions to create dynamic styles.

Example:

$base-font-size: 16px;

h1 {
  font-size: $base-font-size * 2;
}

Compiled CSS:

h1 {
  font-size: 32px;
}

Default Variables

You can provide default values for variables using the !default flag, allowing them to be overridden by later declarations.

Example:

$primary-color: #3498db !default;
$primary-color: #e74c3c; // Overrides the default value

body {
  color: $primary-color;
}

Compiled CSS:

body {
  color: #e74c3c;
}

Scope of Variables:

Variables have different scopes depending on where they are declared:

• Global Scope: Variables declared outside any selector or block are globally scoped and accessible anywhere in the stylesheet.
• Local Scope: Variables declared inside a selector or block are only accessible within that scope.

Example:

$global-color: #3498db;

body {
  $local-color: #2ecc71;
  color: $global-color; // Accessible
  background-color: $local-color; // Accessible
}

p {
  color: $global-color; // Accessible
  // background-color: $local-color; // Not accessible, would cause an error
}

Compiled CSS:

body {
  color: #3498db;
  background-color: #2ecc71;
}

p {
  color: #3498db;
}

Common Use Cases for Sass Variables:

Color Variables:

Define a consistent color palette for your project, making it easy to maintain and update.

Example:

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

a {
  color: $primary-color;
}

.alert {
  background-color: $warning-color;
}

Typography Variables:

Create variables for fonts and text sizes to maintain consistency and simplify typography management.

Example:

$base-font-size: 16px;
$heading-font-family: Georgia, serif;

h1 {
  font-family: $heading-font-family;
  font-size: $base-font-size * 2;
}

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

Spacing Variables:

Define variables for margins, padding, and other spacing to ensure consistent spacing throughout your project.

Example:

$base-padding: 10px;
$base-margin: 15px;

.container {
  padding: $base-padding;
  margin: $base-margin;
}

Conclusion:

Sass variables are a fundamental feature that can transform how you write and manage CSS. By allowing you to store and reuse values, they make your stylesheets more maintainable, consistent, and flexible. Whether you’re working on a small project or a large-scale application, integrating Sass variables into your workflow can significantly enhance your development process.