CSS limitations that SASS solves - Performance & Optimization

Performance: CSS limitations that SASS solves

MEDIUM IMPACT

This concept affects the CSS authoring process and indirectly impacts page load speed by reducing CSS file size and complexity.

Writing maintainable and efficient CSS with reusable styles

SASS

$border-radius: 0.5rem;
$padding: 1rem;

@mixin common-style {
  padding: $padding;
  border-radius: $border-radius;
}

.button {
  @include common-style;
  background-color: blue;
  color: white;
}
.card {
  @include common-style;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.alert {
  @include common-style;
  background-color: red;
  color: white;
}

SASS mixins and variables reduce repetition, lowering CSS file size and improving maintainability.

📈 Performance GainSaves ~1-2kb in CSS file size, reducing LCP by a few milliseconds.

Writing maintainable and efficient CSS with reusable styles

SASS

/* Plain CSS with repeated code */
.button {
  background-color: blue;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}
.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  padding: 1rem;
}
.alert {
  background-color: red;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

Repeated CSS properties increase file size and make maintenance harder, leading to larger CSS files and slower page load.

📉 Performance CostAdds unnecessary CSS bytes increasing CSS file size by ~1-2kb, slightly delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated CSS properties	N/A	N/A	Higher due to larger CSS file	[X] Bad
SASS with variables and mixins	N/A	N/A	Lower due to smaller CSS file	[OK] Good

Rendering Pipeline

SASS compiles to CSS before the browser loads the page, so it affects the CSS file size and complexity, which influences the browser's style calculation and layout stages.

→Style Calculation

→Layout

⚠️ BottleneckStyle Calculation due to large or complex CSS files

Core Web Vital Affected

LCP

This concept affects the CSS authoring process and indirectly impacts page load speed by reducing CSS file size and complexity.

Optimization Tips

1Use SASS variables to avoid repeating values and reduce CSS size.

2Use mixins to group reusable styles and keep CSS DRY.

3Smaller CSS files speed up browser style calculation and improve LCP.

Performance Quiz - 3 Questions

How does using SASS variables and mixins affect CSS file size?

A It has no effect on CSS file size

B It increases CSS file size due to added code

C It reduces CSS file size by avoiding repetition

D It delays CSS parsing in the browser

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and compare file sizes of CSS before and after using SASS.

What to look for: Look for smaller CSS file size and faster CSS download time indicating better performance.

Practice

1. Which of the following is a limitation of plain CSS that SASS helps to solve?

easy

A. No support for images in styles

B. Lack of variables to reuse values easily

C. Inability to add colors to elements

D. Cannot change font sizes

Solution

1. Step 1: Understand CSS limitations

   Plain CSS does not have variables, so you must repeat values like colors or sizes.

2. Step 2: Identify SASS feature solving this

   SASS introduces variables, allowing reuse of values and easier updates.

3. Final Answer:

   Lack of variables to reuse values easily -> Option B

4. Quick Check:

   Variables solve repeated values problem [OK]

Hint: Remember: variables = reuse values easily [OK]

Common Mistakes:

• Thinking CSS cannot add colors
• Confusing images with CSS limitations
• Believing font sizes can't be changed in CSS

2. Which SASS syntax correctly defines a variable for a primary color?

easy

A. @primary-color: #3498db;

B. var primary-color = #3498db;

C. primary-color: #3498db;

D. $primary-color: #3498db;

Solution

1. Step 1: Recall SASS variable syntax

   SASS variables start with a dollar sign ($) followed by the name and value.

2. Step 2: Match syntax to options

   $primary-color: #3498db; uses correct $ sign and colon syntax; others use invalid forms.

3. Final Answer:

   $primary-color: #3498db; -> Option D

4. Quick Check:

   SASS variables start with $ [OK]

Hint: Variables in SASS always start with $ [OK]

Common Mistakes:

• Using var keyword like JavaScript
• Omitting $ sign before variable name
• Using @ symbol incorrectly

3. What will be the output CSS of this SASS code?

$color: red;
.button {
  color: $color;
  &:hover {
    color: blue;
  }
}

medium

A. .button { color: red; } .button:hover { color: blue; }

B. .button { color: $color; } .button:hover { color: blue; }

C. .button { color: red; } &:hover { color: blue; }

D. .button { color: blue; } .button:hover { color: red; }

Solution

1. Step 1: Replace variable with value

   The variable $color is red, so color: $color becomes color: red.

2. Step 2: Understand nesting output

   The nested &:hover becomes .button:hover in CSS.

3. Final Answer:

   .button { color: red; } .button:hover { color: blue; } -> Option A

4. Quick Check:

   Variables replaced and nesting expanded [OK]

Hint: Variables replaced, nesting becomes combined selectors [OK]

Common Mistakes:

• Leaving $color as is in output
• Not expanding &:hover properly
• Swapping colors in hover

4. Identify the error in this SASS code:

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius;
}

medium

A. Missing semicolon after mixin definition

B. Mixin name misspelled

C. Mixin called without required argument

D. Variable $radius not defined

Solution

1. Step 1: Check mixin definition

   The mixin border-radius requires one argument $radius.

2. Step 2: Check mixin usage

   The mixin is included without passing any argument, causing an error.

3. Final Answer:

   Mixin called without required argument -> Option C

4. Quick Check:

   Mixin arguments must be passed when required [OK]

Hint: Pass all required mixin arguments [OK]

Common Mistakes:

• Forgetting to pass mixin arguments
• Assuming variables auto-defined
• Ignoring semicolon rules

5. You want to create a theme with two colors that can be switched easily. Which SASS feature helps you organize this best?

hard

A. Using variables and partial files with imports

B. Writing all styles in one big CSS file

C. Using inline styles in HTML

D. Using only plain CSS without variables

Solution

1. Step 1: Understand theme switching needs

   Switching themes requires organized, reusable styles for colors.

2. Step 2: Identify SASS features for organization

   Variables store colors; partial files and imports keep code modular and maintainable.

3. Step 3: Evaluate options

   Using variables and partial files with imports uses variables and partials, which is best practice. Others are poor for theme management.

4. Final Answer:

   Using variables and partial files with imports -> Option A

5. Quick Check:

   Variables + partials = organized theme [OK]

Hint: Use variables and partials for easy theme changes [OK]

Common Mistakes:

• Mixing all styles in one file
• Using inline styles for themes
• Ignoring variables for colors