Vendor prefix mixin patterns in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass mixin usage?

Given the following Sass mixin and usage, what CSS will be generated?

@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  transform: $value;
}

.box {
  @include transform(rotate(45deg));
}

SASS

@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  transform: $value;
}

.box {
  @include transform(rotate(45deg));
}

A

.box {
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

B

.box {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

C

.box {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

D

.box {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

💡 Hint

Remember the order of properties in the mixin matches the output order.

The mixin outputs the properties in the order written: -webkit-transform, then -moz-transform, then transform. The CSS output preserves this order.

🧠 Conceptual

intermediate

Why use vendor prefix mixins in Sass?

Which of the following best explains why developers use vendor prefix mixins in Sass?

A To write CSS properties once and automatically add all needed vendor prefixes for browser support.

B To avoid writing any CSS properties and rely on browsers to add prefixes automatically.

C To make CSS files larger by repeating properties with prefixes manually.

D To prevent browsers from applying any vendor-specific styles.

💡 Hint

Think about how mixins help with repetitive code.

Vendor prefix mixins let developers write a property once and generate all necessary prefixed versions, saving time and reducing errors.

❓ selector

advanced

Which selector is targeted by this Sass mixin usage?

Given this Sass code, which CSS selector will the styles apply to?

@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

button {
  @include user-select(none);
}

SASS

@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

button {
  @include user-select(none);
}

A Only <button> elements with class 'user-select'

B Only <button> elements inside a container with class 'user-select'

C All <button> elements on the page

D All elements with attribute user-select='none'

💡 Hint

Look at the selector before the mixin usage.

The styles apply to all

❓ layout

advanced

How does this vendor prefix mixin affect layout rendering?

Consider this Sass mixin and usage:

@mixin flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 200px;
}

What visual effect will the container have?

SASS

@mixin flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 200px;
}

A The container will center its child elements horizontally and vertically within 200px height.

B The container will stack child elements vertically without centering.

C The container will hide child elements due to conflicting display properties.

D The container will scroll child elements horizontally.

💡 Hint

Think about what flexbox centering does.

The mixin sets display to flex with vendor prefixes and centers children horizontally and vertically, so children appear centered inside the 200px tall container.

❓ accessibility

expert

Which vendor prefix mixin usage best supports accessibility for focus outlines?

Which Sass mixin usage ensures consistent focus outlines across browsers for accessibility?

@mixin focus-outline($color) {
  outline: 2px solid $color;
  outline-offset: 2px;
  -webkit-outline-offset: 2px;
}

Choose the correct usage:

SASS

@mixin focus-outline($color) {
  outline: 2px solid $color;
  outline-offset: 2px;
  -webkit-outline-offset: 2px;
}

input:focus {
  @include focus-outline(blue);
}

A input:focus { @include focus-outline(blue); }

B input:focus-visible { @include focus-outline(blue); }

C input { @include focus-outline(blue); }

D input:hover { @include focus-outline(blue); }

💡 Hint

Focus outlines should appear only when keyboard focusing, not on hover.

Using :focus-visible applies outlines only when the element is focused via keyboard or assistive technology, improving accessibility by avoiding outlines on mouse clicks.

Practice

1. What is the main purpose of using a vendor prefix mixin in Sass?

easy

A. To add browser-specific prefixes automatically for better compatibility

B. To create animations without writing keyframes

C. To import external CSS files into Sass

D. To define variables for colors and fonts

Solution

1. Step 1: Understand vendor prefixes

   Vendor prefixes are added to CSS properties to ensure they work in different browsers that may require special syntax.

2. Step 2: Role of mixins in Sass

   Mixins let you write code once and reuse it, so a vendor prefix mixin adds all needed prefixes automatically wherever used.

3. Final Answer:

   To add browser-specific prefixes automatically for better compatibility -> Option A

4. Quick Check:

   Vendor prefix mixin = add prefixes automatically [OK]

Hint: Think: mixins reuse prefix code for all browsers [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Believing mixins create animations

2. Which of the following is the correct syntax to define a vendor prefix mixin for transform in Sass?

easy

A. @mixin transform($value) { -webkit-transform: $value; -moz-transform: $value; -ms-transform: $value; }

B. @mixin transform($value) { transform: $value; -webkit-transform: $value; -moz-transform: $value; }

C. @mixin transform { -webkit-transform: $value; -moz-transform: $value; transform: $value; }

D. @mixin transform($value) { -webkit-transform: $value; -moz-transform: $value; transform: $value; }

Solution

1. Step 1: Check mixin parameter usage

   The mixin must accept a parameter ($value) to apply the transform value.

2. Step 2: Verify property order and completeness

   @mixin transform($value) { -webkit-transform: $value; -moz-transform: $value; transform: $value; } correctly includes -webkit-, -moz-, and the standard transform property in proper syntax and order.

3. Final Answer:

   @mixin transform($value) { -webkit-transform: $value; -moz-transform: $value; transform: $value; } -> Option D

4. Quick Check:

   Correct mixin syntax with parameter and prefixes = D [OK]

Hint: Always include parameter and standard property last [OK]

Common Mistakes:

• Omitting the parameter in mixin definition
• Wrong order of properties
• Missing the standard property without prefix

3. Given the following Sass code, what CSS will be generated?

@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

.button {
  @include user-select(none);
}

medium

A. .button { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

B. .button { -webkit-user-select: none; user-select: none; }

C. .button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

D. .button { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

Solution

1. Step 1: Understand mixin expansion

   The mixin includes all vendor prefixes and the standard property with the passed value 'none'.

2. Step 2: Check output order and completeness

   The generated CSS will list all prefixes and the standard property exactly as in the mixin, inside the .button selector.

3. Final Answer:

   .button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -> Option C

4. Quick Check:

   Mixin expands all prefixes + standard = B [OK]

Hint: Mixin outputs all prefixes in order used [OK]

Common Mistakes:

• Missing some vendor prefixes
• Changing property order incorrectly
• Omitting the standard property

4. Identify the error in this vendor prefix mixin and choose the fix:

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow
  box-shadow: $shadow;
}

medium

A. Remove the parameter $shadow from mixin

B. Add a semicolon after '-moz-box-shadow: $shadow;'

C. Change mixin to a function

D. Add quotes around $shadow values

Solution

1. Step 1: Check syntax line by line

   The line '-moz-box-shadow: $shadow' is missing a semicolon at the end, causing a syntax error.

2. Step 2: Fix syntax error

   Adding the missing semicolon after '-moz-box-shadow: $shadow;' corrects the mixin syntax.

3. Final Answer:

   Add a semicolon after '-moz-box-shadow: $shadow;' -> Option B

4. Quick Check:

   Missing semicolon causes error = fix by adding it [OK]

Hint: Check each property line ends with semicolon [OK]

Common Mistakes:

• Ignoring missing semicolon errors
• Thinking parameters are wrong
• Confusing mixins with functions

5. You want to create a Sass mixin that adds vendor prefixes for display: flex and also sets flex-direction. Which is the best way to write this mixin?

hard

A. @mixin flex-container($direction) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}

B. @mixin flex-container($direction) {
display: flex;
flex-direction: $direction;
}

C. @mixin flex-container {
display: flex;
flex-direction: row;
}

D. @mixin flex-container($direction) {
display: -webkit-flex;
display: flex;
flex-direction: $direction;
}

Solution

1. Step 1: Include all necessary vendor prefixes for display flex

   @mixin flex-container($direction) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: $direction; -ms-flex-direction: $direction; flex-direction: $direction; } includes -webkit-box and -ms-flexbox for older browsers, plus standard flex.

2. Step 2: Add vendor prefixes for flex-direction with parameter

   @mixin flex-container($direction) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: $direction; -ms-flex-direction: $direction; flex-direction: $direction; } also prefixes flex-direction for -webkit- and -ms- with the passed $direction value.

3. Final Answer:

   @mixin flex-container($direction) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: $direction; -ms-flex-direction: $direction; flex-direction: $direction; } -> Option A

4. Quick Check:

   Complete prefixes for display and flex-direction = A [OK]

Hint: Prefix both display and flex-direction with parameter [OK]

Common Mistakes:

• Omitting older browser prefixes
• Not using parameter for direction
• Using incomplete prefix sets