Vendor prefix mixin patterns in SASS - Mini Project: Build & Apply

Vendor Prefix Mixin Patterns in Sass

📖 Scenario: You are creating a small style library for a website. You want to make sure some CSS properties work well across different browsers by adding vendor prefixes automatically.

🎯 Goal: Build a Sass mixin called vendor-prefix that adds vendor prefixes -webkit-, -moz-, and -ms- to a CSS property. Use this mixin to style a button with a transform property that works in all browsers.

📋 What You'll Learn

Create a Sass map with vendor prefixes as keys and their prefix strings as values.

Create a variable to hold the CSS property name to prefix.

Write a mixin called vendor-prefix that loops over the prefixes and outputs the property with each prefix.

Use the mixin to add prefixed transform properties to a .button class.

💡 Why This Matters

🌍 Real World

Vendor prefixes help CSS properties work across different browsers that may not support the standard property yet. Using a mixin saves time and reduces errors.

💼 Career

Front-end developers often write CSS that works well on many browsers. Knowing how to automate vendor prefixes with Sass mixins is a useful skill.

1

Create a Sass map of vendor prefixes

Create a Sass map called $prefixes with these exact entries: webkit: '-webkit-', moz: '-moz-', and ms: '-ms-'.

SASS

# Create a Sass map called $prefixes with keys webkit, moz, ms and their prefix strings
# Your code here

Hint

Use parentheses ( ) to create a Sass map with key: value pairs separated by commas.

2

Create a variable for the CSS property name

Create a variable called $property and set it to the string 'transform'.

SASS

$prefixes: (
  webkit: '-webkit-',
  moz: '-moz-',
  ms: '-ms-'
);

# Create a variable $property and set it to 'transform'
# Your code here

Hint

Use $property: 'transform'; to create a string variable.

3

Write the vendor-prefix mixin

Write a mixin called vendor-prefix that takes one argument $value. Inside, use a @each loop with variables $name and $prefix to loop over $prefixes. For each prefix, output the CSS property with the prefix and set it to $value. Also output the unprefixed property with $value after the loop.

SASS

$prefixes: (
  webkit: '-webkit-',
  moz: '-moz-',
  ms: '-ms-'
);

$property: 'transform';

# Write a mixin vendor-prefix($value) that loops over $prefixes
# and outputs each prefixed property with $value
# Then output the unprefixed property with $value
# Your code here

Hint

Use @mixin to define the mixin and @each to loop over the map. Use interpolation #{} to combine prefix and property.

4

Use the mixin in a button style

Create a CSS class .button. Inside, use the @include vendor-prefix mixin with the value rotate(45deg).

SASS

$prefixes: (
  webkit: '-webkit-',
  moz: '-moz-',
  ms: '-ms-'
);

$property: 'transform';

@mixin vendor-prefix($value) {
  @each $name, $prefix in $prefixes {
    #{$prefix}#{$property}: $value;
  }
  #{$property}: $value;
}

# Create a .button class and include the vendor-prefix mixin with rotate(45deg)
# Your code here

Hint

Use .button { @include vendor-prefix(rotate(45deg)); } to apply the mixin.