Vendor prefix mixin patterns in SASS

Introduction

Vendor prefixes help your CSS work on different browsers. Mixins let you write these prefixes once and reuse them easily.

When you want to add CSS properties that need prefixes for older browsers.

When you want to keep your styles clean and avoid repeating code.

When you want to update prefixes in one place instead of many.

When you want to support multiple browsers like Chrome, Firefox, Safari, and Edge.

When you want to write CSS faster and avoid mistakes with prefixes.

Syntax

SASS

@mixin prefix-name($value) {
  -webkit-prefix-name: $value;
  -moz-prefix-name: $value;
  -ms-prefix-name: $value;
  prefix-name: $value;
}

Replace prefix-name with the actual CSS property you want to prefix.

The mixin takes a value and applies it with different vendor prefixes.

Examples

This mixin adds border-radius with prefixes for WebKit and Mozilla browsers.

SASS

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

This mixin adds box-shadow with prefixes for WebKit and Mozilla browsers.

SASS

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

This mixin adds transform with prefixes for WebKit and Microsoft browsers.

SASS

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

Sample Program

This example shows a button styled with a border radius using a vendor prefix mixin. The mixin adds the needed prefixes so the rounded corners work on many browsers. The button also has accessible focus styles for keyboard users.

SASS

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

.button {
  @include border-radius(10px);
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
}

.button:focus {
  outline: 3px solid #333;
  outline-offset: 2px;
}

Important Notes

Vendor prefixes are less needed today but still useful for some older browsers.

Always test your styles in different browsers to see if prefixes are needed.

Use semantic HTML and accessible focus styles along with your CSS.

Summary

Vendor prefix mixins save time and keep CSS clean.

They help your styles work across different browsers.

Use mixins to write prefixes once and reuse everywhere.