Lighten and darken functions in SASS - Performance & Optimization

Performance: Lighten and darken functions

LOW IMPACT

These functions affect CSS rendering by changing color values, impacting paint and composite stages during style updates.

Adjusting colors dynamically in CSS using lighten/darken functions

SASS

$primary-color: #3498db;
$primary-dark: #2a80b9; // precomputed darkened color
$primary-darker: #1f5f82; // precomputed darker color
.button {
  background-color: $primary-dark;
  border-color: $primary-darker;
}

Precomputing colors reduces compile time and CSS size by avoiding repeated function calls and ensures consistent colors.

📈 Performance GainSaves CSS compile time and reduces CSS size by avoiding repeated lighten/darken calls

Adjusting colors dynamically in CSS using lighten/darken functions

SASS

$primary-color: #3498db;
.button {
  background-color: darken($primary-color, 20%);
  border-color: darken($primary-color, 30%);
}

Calling darken multiple times with different percentages causes repeated color calculations at compile time and can lead to inconsistent colors if used in many places.

📉 Performance CostAdds extra CSS compile time and increases CSS size if repeated with many variations

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated lighten/darken calls in CSS	0	0	Increases paint cost due to larger CSS and style recalculations	[X] Bad
Precomputed color variables	0	0	Minimal paint cost with smaller CSS and simpler style calculations	[OK] Good

Rendering Pipeline

Lighten and darken functions run at CSS preprocessor compile time, so they do not affect runtime style calculation directly but influence the final CSS size and complexity, which impacts style calculation and paint.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckStyle Calculation due to complex or repeated color calculations increasing CSS size

Core Web Vital Affected

CLS

These functions affect CSS rendering by changing color values, impacting paint and composite stages during style updates.

Optimization Tips

1Precompute lighten/darken colors once and reuse variables to reduce CSS size.

2Avoid calling lighten/darken functions repeatedly with different values inline.

3Use DevTools Performance panel to check style recalculation and paint costs.

Performance Quiz - 3 Questions

How do lighten and darken functions in Sass affect page load performance?

A They cause multiple DOM reflows at runtime.

B They increase CSS compile time and CSS size, affecting style calculation and paint.

C They block JavaScript execution during page load.

D They have no impact on performance at all.

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the Style Recalculation and Paint events to see if complex styles cause delays.

What to look for: Look for long style recalculation times or large paint areas that indicate heavy CSS complexity from color functions.

Practice

1. What does the lighten() function do in Sass?

easy

A. Changes a color to grayscale

B. Makes a color darker by decreasing its brightness

C. Inverts the color completely

D. Makes a color lighter by increasing its brightness

Solution

1. Step 1: Understand the purpose of lighten()

   The lighten() function increases the lightness of a color, making it appear lighter.

2. Step 2: Compare with other options

   Other options describe darkening, grayscale, or inversion, which are not what lighten() does.

3. Final Answer:

   Makes a color lighter by increasing its brightness -> Option D

4. Quick Check:

   lighten() = makes color lighter [OK]

Hint: Lighten means make color brighter or lighter [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Thinking lighten() changes color hue
• Assuming lighten() inverts colors

2. Which of the following is the correct syntax to darken a color by 20% in Sass?

easy

A. darken(20%, #3498db)

B. darken(#3498db 20%)

C. darken(#3498db, 20%)

D. darken(#3498db; 20%)

Solution

1. Step 1: Recall function syntax

   The darken() function takes two arguments: a color and a percentage, in that order, separated by a comma.

2. Step 2: Check each option

   darken(#3498db, 20%) matches the correct syntax: darken(#3498db, 20%). Others have wrong order or missing comma/semicolon.

3. Final Answer:

   darken(#3498db, 20%) -> Option C

4. Quick Check:

   darken(color, percent) syntax [OK]

Hint: Function args: color first, then percentage with comma [OK]

Common Mistakes:

• Swapping argument order
• Omitting comma between arguments
• Using semicolon instead of comma

3. What color will be produced by this Sass code?

$base-color: #800000;
$light-color: lighten($base-color, 50%);
body { background-color: $light-color; }

medium

A. A very dark red color

B. A very light pinkish color

C. Pure white

D. Bright green

Solution

1. Step 1: Understand lighten effect on #800000

   The base color #800000 is a dark red. Lightening it by 50% will add a lot of white, making it much lighter and pinkish.

2. Step 2: Eliminate other options

   It won't be dark (B), pure white (C), or green (D) because lighten only adds lightness to the original red color.

3. Final Answer:

   A very light pinkish color -> Option B

4. Quick Check:

   lighten dark red by 50% = light pink [OK]

Hint: Lighten dark red by 50% = light pinkish color [OK]

Common Mistakes:

• Thinking lighten makes color darker
• Confusing lighten with color inversion
• Expecting pure white after lighten

4. Identify the error in this Sass code:

$color: #123456;
$dark: darken($color 30%);
.button { background: $dark; }

medium

A. Missing comma between arguments in darken()

B. Invalid color code #123456

C. darken() cannot be used inside variables

D. Percentage should be without % sign

Solution

1. Step 1: Check darken() function syntax

   The darken() function requires a comma between the color and percentage arguments.

2. Step 2: Identify the missing comma

   In the code, darken($color 30%) lacks a comma, causing a syntax error.

3. Final Answer:

   Missing comma between arguments in darken() -> Option A

4. Quick Check:

   darken(color, percent) needs comma [OK]

Hint: Remember comma separates arguments in functions [OK]

Common Mistakes:

• Omitting comma between function arguments
• Using invalid color codes
• Removing % sign from percentage

5. You want to create a button with a base blue color #007BFF. On hover, the button should become 15% darker. Which Sass code correctly achieves this with variables and hover style?

hard

A. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: darken($btn-color, 15%);
}
}

B. $btn-color: #007BFF;
.button {
background-color: darken($btn-color, 15%);
&:hover {
background-color: $btn-color;
}
}

C. $btn-color: #007BFF;
.button {
background-color: lighten($btn-color, 15%);
&:hover {
background-color: darken($btn-color, 15%);
}
}

D. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: lighten($btn-color, 15%);
}
}

Solution

1. Step 1: Set base color variable

   The variable $btn-color is set to the base blue color #007BFF.

2. Step 2: Apply base color and darken on hover

   The button background uses $btn-color normally, and on hover uses darken($btn-color, 15%) to make it 15% darker.

3. Step 3: Verify hover effect logic

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   correctly darkens on hover.

   $btn-color: #007BFF;
   .button {
     background-color: darken($btn-color, 15%);
     &:hover {
       background-color: $btn-color;
     }
   }

   reverses colors.

   $btn-color: #007BFF;
   .button {
     background-color: lighten($btn-color, 15%);
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   lightens base color incorrectly.

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: lighten($btn-color, 15%);
     }
   }

   lightens on hover instead of darkening.

4. Final Answer:

   Code with base $btn-color and darken on hover -> Option A

5. Quick Check:

   Hover darken 15% =

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   [OK]

Hint: Hover darker means darken() inside &:hover [OK]

Common Mistakes:

• Swapping lighten and darken functions
• Applying darken on base instead of hover
• Forgetting to use & for hover selector