Vendor prefix mixin patterns in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a vendor prefix in CSS?

A vendor prefix is a special code added before CSS properties to ensure they work in specific browsers. Examples include -webkit- for Chrome and Safari, -moz- for Firefox, and -ms- for Internet Explorer.

beginner

Why use mixins for vendor prefixes in Sass?

Mixins let you write vendor prefixes once and reuse them everywhere. This saves time, avoids mistakes, and keeps your code clean and easy to update.

beginner

Example of a simple vendor prefix mixin for border-radius in Sass?

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

intermediate

How do vendor prefix mixins improve maintainability?

If browser support changes, you only update the mixin once. All styles using that mixin update automatically, making your project easier to maintain.

intermediate

What is a common pattern to handle multiple vendor prefixes in one mixin?

Use a mixin that sets all needed prefixes plus the standard property. Pass the value as a parameter to keep it flexible and reusable.

What does the -webkit- prefix target?

A Chrome and Safari browsers

B Firefox browser

C Internet Explorer

D All browsers

The -webkit- prefix is used mainly for Chrome and Safari browsers.

Why use a mixin for vendor prefixes in Sass?

A To write prefixes once and reuse them

B To make CSS slower

C To avoid using variables

D To remove prefixes automatically

Mixins help write vendor prefixes once and reuse them, saving time and reducing errors.

Which of these is NOT a vendor prefix?

A -moz-

B -html-

C -ms-

D -webkit-

-html- is not a vendor prefix.

What is the main benefit of updating a vendor prefix mixin?

A It slows down the browser

B It deletes old CSS files

C All styles using it update automatically

D It changes HTML structure

Updating a mixin updates all styles that use it, improving maintainability.

How do you pass values to a vendor prefix mixin?

A By adding inline styles

B By editing the CSS file directly

C Using JavaScript

D As parameters to the mixin

Values like sizes or colors are passed as parameters to keep mixins flexible.

Explain what vendor prefix mixins are and why they are useful in Sass.

Think about how writing prefixes once helps many places.

Describe how you would write a mixin to handle vendor prefixes for a CSS property.

Start with @mixin and include all prefixes inside.