Variable declaration with $ in SASS - Mini Project: Build & Apply

Using Variables with $ in Sass

📖 Scenario: You are creating a simple style sheet for a website. To keep colors consistent and easy to change, you will use variables in Sass.

🎯 Goal: Create a Sass file that uses variables declared with $ to style a heading and a paragraph with consistent colors.

📋 What You'll Learn

Declare color variables using $

Use the variables to set colors in CSS selectors

Write valid Sass code that compiles to CSS

💡 Why This Matters

🌍 Real World

Web developers use Sass variables to manage colors, fonts, and other style values efficiently across large projects.

💼 Career

Knowing how to use Sass variables is a common skill required for front-end developer roles to write maintainable and scalable CSS.

1

Declare color variables with $

Create two variables called $primary-color and $secondary-color with the values #3498db and #2ecc71 respectively.

SASS

// Declare $primary-color and $secondary-color variables
// Your code here

Hint

Use the syntax $variable-name: value; to declare variables in Sass.

2

Use variables in heading style

Add a CSS rule for h1 that sets the color property to the variable $primary-color.

SASS

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

h1 {
  /* Set color using $primary-color */
  /* Your code here */
}

Hint

Inside the h1 block, write color: $primary-color; to use the variable.

3

Use variables in paragraph style

Add a CSS rule for p that sets the color property to the variable $secondary-color.

SASS

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

h1 {
  color: $primary-color;
}

p {
  /* Set color using $secondary-color */
  /* Your code here */
}

Hint

Inside the p block, write color: $secondary-color; to use the variable.

4

Add background color using variable

Add a CSS rule for body that sets the background-color property to the variable $primary-color.

SASS

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

h1 {
  color: $primary-color;
}

p {
  color: $secondary-color;
}

body {
  /* Set background-color using $primary-color */
  /* Your code here */
}

Hint

Inside the body block, write background-color: $primary-color; to use the variable.

Practice

1. What symbol is used to declare a variable in Sass?

easy

A. $

B. #

C. @

D. %

Solution

1. Step 1: Recall Sass variable syntax

   In Sass, variables always start with the $ symbol to distinguish them from other values.

2. Step 2: Identify the correct symbol

   Among the options, only $ is used for variables in Sass.

3. Final Answer:

   $ -> Option A

4. Quick Check:

   Variables start with $ in Sass [OK]

Hint: Remember: Sass variables always begin with $ [OK]

Common Mistakes:

• Using # or @ instead of $ for variables
• Confusing CSS IDs (#) with Sass variables
• Omitting the $ symbol before variable names

2. Which of the following is the correct way to declare a color variable in Sass?

easy

A. main-color: $3498db;

B. $main-color: #3498db;

C. $main-color = #3498db;

D. @main-color: #3498db;

Solution

1. Step 1: Check variable declaration syntax

   Sass variables start with $, followed by the name, a colon, then the value, ending with a semicolon.

2. Step 2: Compare options

   $main-color: #3498db; matches the correct syntax: $main-color: #3498db;. Others use wrong symbols or order.

3. Final Answer:

   $main-color: #3498db; -> Option B

4. Quick Check:

   Variable declaration uses $name: value; [OK]

Hint: Use $name: value; to declare variables in Sass [OK]

Common Mistakes:

• Using = instead of : to assign values
• Placing $ after the variable name
• Using @ instead of $ for variables

3. What will be the background color of the button in this Sass code?

$btn-bg: #ff0000;
button {
  background-color: $btn-bg;
}

medium

A. Blue

B. Green

C. Red

D. No color (default)

Solution

1. Step 1: Identify the variable value

   The variable $btn-bg is assigned the color #ff0000, which is red.

2. Step 2: Check usage in button style

   The button's background-color uses $btn-bg, so it will be red.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   $btn-bg = #ff0000 (red) [OK]

Hint: Match variable value to color code to find output [OK]

Common Mistakes:

• Confusing hex color codes with color names
• Forgetting to use $ before variable name
• Assuming default color if variable is used

4. Identify the error in this Sass variable declaration:

$font-size 16px;

medium

A. Variable name should not start with $

B. Semicolon is missing at the end

C. Value should be in quotes

D. Missing colon between variable name and value

Solution

1. Step 1: Review correct variable syntax

   Sass variables require a colon : between the name and value, like $font-size: 16px;.

2. Step 2: Identify missing colon

   The code misses the colon, causing a syntax error.

3. Final Answer:

   Missing colon between variable name and value -> Option D

4. Quick Check:

   Variable declaration needs colon : [OK]

Hint: Check for colon : after variable name [OK]

Common Mistakes:

• Omitting colon between name and value
• Using = instead of :
• Forgetting semicolon at end (less critical)

5. You want to create a Sass variable for spacing that changes based on screen size. Which is the best way to declare and use it?

$spacing: 1rem;

@media (min-width: 600px) {
  $spacing: 2rem;
}

.container {
  padding: $spacing;
}

hard

A. Variables cannot be redefined inside media queries

B. This works; $spacing changes inside media query

C. Use !default to change variable inside media query

D. Declare two variables and use @if to switch

Solution

1. Step 1: Understand Sass variable scope

   Sass variables are static and cannot change inside media queries because media queries are CSS rules, not Sass logic blocks.

2. Step 2: Evaluate the code behavior

   Redefining $spacing inside @media does not work; Sass processes variables before CSS is generated.

3. Step 3: Correct approach

   To handle responsive spacing, declare separate variables or use mixins/functions with media queries.

4. Final Answer:

   Variables cannot be redefined inside media queries -> Option A

5. Quick Check:

   Sass variables are static, not dynamic in media queries [OK]

Hint: Sass variables are static; media queries can't change them [OK]

Common Mistakes:

• Trying to redefine variables inside media queries
• Assuming Sass variables behave like CSS custom properties
• Not using separate variables or mixins for responsiveness