Variable declaration with $ in SASS - Browser Rendering Trace

Render Flow - Variable declaration with $

Read SASS file

↓

Parse $variable declarations

↓

Store variables in memory

↓

Replace variable references with values

↓

Compile to CSS

↓

Browser renders CSS

The SASS compiler reads the file, finds variables declared with $, stores their values, replaces all uses of these variables with their values, then outputs standard CSS for the browser to render.

Render Steps - 3 Steps

Code Added:$main-color: #3498db;

Before

[ ]
No styles applied, plain div with text 'Hello'

→

After

[ ]
No visible change yet, variable declared but not used

Declared a variable $main-color with a blue color value. No visual change because variable is not applied yet.

🔧 Browser Action:Stores variable in SASS memory during compilation

Code Sample

A blue box with white text and padding, styled using SASS variables for color and padding.

SASS

<div class="box">Hello</div>

SASS

$main-color: #3498db;
$padding-size: 1.5rem;

.box {
  background-color: $main-color;
  padding: $padding-size;
  color: white;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After step 3, what visual change do you see on the box?

A The box has no background color and no padding

B The box has a blue background, white text, padding, and rounded corners

C The box text color changes to black only

D The box disappears from the page

Common Confusions - 2 Topics

Why doesn't changing $main-color alone change the box color in the browser?

Because variables only affect styles where they are used. If you change $main-color but don't recompile or don't use it in any CSS property, the browser won't see any change.

💡 Variables must be used in CSS properties and the SASS must be compiled again to see changes.

Can I use variables before declaring them?

No, variables must be declared before they are used in SASS. Using a variable before declaration causes an error or no effect.

💡 Declare variables at the top of your SASS file.

Property Reference

Property	Value Applied	Visual Effect	Common Use
$main-color	#3498db	Sets background color to blue	Consistent color usage
$padding-size	1.5rem	Adds space inside the box around text	Uniform spacing
color	white	Text color changes to white	Text readability
border-radius	0.5rem	Rounded corners on box edges	Soft visual style

Concept Snapshot

$ declares a variable in SASS Variables store reusable values like colors or sizes Variables must be declared before use SASS replaces variables with values during compilation Final CSS has no variables, only values Using variables makes styling consistent and easy to update

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