Component variant generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base button style using a SASS variable.

SASS

$btn-color: [1];
.button {
  background-color: $btn-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

Drag options to blanks, or click blank then click option'

Ared

Bblue

C#3498db

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes when hex is expected.

Forgetting the $ sign for variables.

The variable $btn-color is set to a hex color #3498db, which is a blue shade. This color is used as the background for the button.

2fill in blank

medium

Complete the code to create a SASS mixin for button variants.

SASS

@mixin button-variant($color) {
  background-color: [1];
  border: 2px solid $color;
  color: white;
}

Drag options to blanks, or click blank then click option'

Abtn-color

Bcolor

Cbackground-color

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the parameter name without the $ sign.

Using unrelated variable names.

The mixin uses the parameter $color to set the background color dynamically. Variables in SASS start with a $.

3fill in blank

hard

Fix the error in the code to generate button variants using the mixin.

SASS

.btn-primary {
  @include button-variant([1]);
}

Drag options to blanks, or click blank then click option'

A$primary-color

Bprimary-color

CprimaryColor

Dprimary_color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before the variable name.

Using camelCase or underscores incorrectly.

When passing a variable to a mixin, you must use the variable name with the $ prefix, like $primary-color.

4fill in blank

hard

Fill both blanks to create a map of button variants and loop through them to generate styles.

SASS

$btn-variants: (
  primary: [1],
  secondary: [2]
);

@each $name, $color in $btn-variants {
  .btn-#{$name} {
    @include button-variant($color);
  }
}

Drag options to blanks, or click blank then click option'

A$primary-color

B$secondary-color

Cprimary-color

Dsecondary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $ in the map values.

Mixing keys and values incorrectly.

The map keys are variant names, and the values are variables holding colors. Variables must have the $ prefix.

5fill in blank

hard

Fill all three blanks to create a function that returns a color for a variant and use it in a style.

SASS

@function get-variant-color($variant) {
  @return map-get($btn-variants, [1]);
}

.btn-alert {
  background-color: get-variant-color([2]);
  border-color: [3];
}

Drag options to blanks, or click blank then click option'

A$variant

Balert

C$alert-color

Dalert-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variant name without quotes in the function call.

Using variable names without $ where needed.

The function uses the parameter $variant to get the color from the map. The class uses the string alert to get the color. The border color uses the variable $alert-color.

Practice

1. What is the main purpose of component variant generation in Sass?

easy

A. To create multiple style versions of the same component easily

B. To write JavaScript inside Sass files

C. To compile Sass into JavaScript

D. To remove unused CSS automatically

Solution

1. Step 1: Understand component variants

   Component variants allow creating different styles for the same element, like buttons with different colors.

2. Step 2: Identify the main purpose

   The main goal is to generate these style versions easily and keep code organized.

3. Final Answer:

   To create multiple style versions of the same component easily -> Option A

4. Quick Check:

   Component variant generation = multiple style versions [OK]

Hint: Variants mean different styles for one component [OK]

Common Mistakes:

• Confusing Sass with JavaScript
• Thinking Sass compiles to JS
• Believing variants remove unused CSS

2. Which Sass syntax correctly defines a mixin for generating button variants with a dynamic color?

easy

A. @include button-variant($color) { background-color: $color; }

B. @function button-variant($color) { background-color: $color; }

C. @extend button-variant($color) { background-color: $color; }

D. @mixin button-variant($color) { background-color: $color; }

Solution

1. Step 1: Identify mixin syntax

   Mixins use '@mixin' to define reusable style blocks with parameters.

2. Step 2: Check options

   @mixin button-variant($color) { background-color: $color; } uses '@mixin' correctly; others misuse '@function', '@include', or '@extend'.

3. Final Answer:

   @mixin button-variant($color) { background-color: $color; } -> Option D

4. Quick Check:

   Mixin definition starts with '@mixin' [OK]

Hint: Define mixins with '@mixin', not '@function' or '@include' [OK]

Common Mistakes:

• Using '@function' instead of '@mixin'
• Trying to define styles inside '@include'
• Confusing '@extend' with mixin definition

3. Given the Sass code:

@mixin variant($name, $color) {
  .btn-#{$name} {
    background-color: $color;
  }
}

@include variant('primary', blue);
@include variant('danger', red);

What CSS will this generate?

medium

A. .btn-primary { background-color: blue; }
.btn-danger { background-color: red; }

B. .btn-#primary { background-color: blue; }
.btn-#danger { background-color: red; }

C. .btn-primary { color: blue; }
.btn-danger { color: red; }

D. .btn-primary { background-color: $color; }
.btn-danger { background-color: $color; }

Solution

1. Step 1: Understand interpolation in class names

   The '#{$name}' inside '.btn-#{$name}' inserts the string value of $name, creating '.btn-primary' and '.btn-danger'.

2. Step 2: Check property values

   The background-color uses the passed $color values 'blue' and 'red' correctly.

3. Final Answer:

   .btn-primary { background-color: blue; } .btn-danger { background-color: red; } -> Option A

4. Quick Check:

   Interpolation creates correct class names [OK]

Hint: Use #{} to insert variables in selectors [OK]

Common Mistakes:

• Leaving interpolation as literal text
• Confusing background-color with color property
• Not passing parameters correctly

4. What is wrong with this Sass code for generating variants?

@mixin variant($name, $color) {
  .btn-$name {
    background-color: $color;
  }
}

@include variant('success', green);

medium

A. Cannot use variables in mixin parameters

B. Incorrect property name 'background-color'

C. Missing interpolation for $name in the selector

D. Mixin cannot be included with parameters

Solution

1. Step 1: Check selector syntax

   Variables inside selectors need interpolation with '#{}'. Here '.btn-$name' misses '#{}'.

2. Step 2: Understand interpolation usage

   Correct syntax is '.btn-#{$name}' to insert the variable value.

3. Final Answer:

   Missing interpolation for $name in the selector -> Option C

4. Quick Check:

   Use '#{}' to insert variables in selectors [OK]

Hint: Use #{} around variables in selectors [OK]

Common Mistakes:

• Forgetting interpolation syntax
• Thinking variables can't be in selectors
• Misusing mixin parameters

5. You want to generate button variants for 'primary', 'secondary', and 'danger' with colors blue, gray, and red using a Sass map and a mixin. Which code correctly creates all variants with minimal repetition?

hard

A. @mixin variants($map) {
.btn {
background-color: map-get($map, primary);
}
}
$btn-colors: (primary: blue, secondary: gray, danger: red);
@include variants($btn-colors);

B. @mixin variants($map) {
@each $name, $color in $map {
.btn-#{$name} {
background-color: $color;
}
}
}
$btn-colors: (primary: blue, secondary: gray, danger: red);
@include variants($btn-colors);

C. @mixin variants($map) {
@for $i from 1 through length($map) {
.btn-#{$i} {
background-color: nth($map, $i);
}
}
}
$btn-colors: (blue, gray, red);
@include variants($btn-colors);

D. @mixin variants($map) {
@each $color in $map {
.btn-#{$color} {
background-color: $color;
}
}
}
$btn-colors: (blue, gray, red);
@include variants($btn-colors);

Solution

1. Step 1: Understand map usage with @each

   Using '@each $name, $color in $map' loops over keys and values, perfect for named variants.

2. Step 2: Check each option's approach

   @mixin variants($map) { @each $name, $color in $map { .btn-#{$name} { background-color: $color; } } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); correctly loops over a map with names and colors, generating '.btn-primary', '.btn-secondary', '.btn-danger' with correct colors.

3. Step 3: Identify issues in other options

   @mixin variants($map) { .btn { background-color: map-get($map, primary); } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); only styles '.btn' once, ignoring variants. @mixin variants($map) { @for $i from 1 through length($map) { .btn-#{$i} { background-color: nth($map, $i); } } } $btn-colors: (blue, gray, red); @include variants($btn-colors); uses numeric indexes without names. @mixin variants($map) { @each $color in $map { .btn-#{$color} { background-color: $color; } } } $btn-colors: (blue, gray, red); @include variants($btn-colors); loops colors but uses color names as class names incorrectly.

4. Final Answer:

   @mixin variants($map) { @each $name, $color in $map { .btn-#{$name} { background-color: $color; } } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); -> Option B

5. Quick Check:

   Use @each with map keys and values for variants [OK]

Hint: Use @each with map keys and values for variant generation [OK]

Common Mistakes:

• Looping only colors without names
• Using numeric loops without keys
• Not generating separate classes per variant