Theming with mixins in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

A mixin is a reusable block of styles in Sass that you can include in other selectors to avoid repeating code.

beginner

How do mixins help with theming in Sass?

Mixins let you define style patterns once and reuse them with different values, making it easy to create and switch themes by changing parameters.

beginner

Example: What does this Sass code do? @mixin theme-colors($bg, $text) { background-color: $bg; color: $text; }

This mixin sets background and text colors using the values passed as $bg and $text. You can reuse it to apply different color themes.

beginner

How do you include a mixin in a Sass selector?

Use the @include directive followed by the mixin name and any arguments, like @include theme-colors(#fff, #000);.

intermediate

Why is using mixins better than copying styles for theming?

Mixins reduce repeated code, make updates easier, and keep your styles consistent across themes by centralizing style logic.

What keyword do you use to define a mixin in Sass?

A @include

B @mixin

C @function

D @extend

You define a mixin with @mixin. To use it, you write @include.

How can you pass colors to a theming mixin?

A By using JavaScript

B By writing CSS variables inside the mixin

C By copying styles manually

D As arguments when including the mixin

You pass colors as arguments to the mixin when you include it, so it applies different themes.

Which of these is a benefit of using mixins for theming?

A Avoid repeating code

B Increase CSS file size

C Make styles harder to update

D Require JavaScript to work

Mixins help avoid repeating code and make styles easier to maintain.

What does this Sass code do? @mixin theme-colors($bg, $text) { background-color: $bg; color: $text; }

A Imports colors from another file

B Defines a CSS class named theme-colors

C Creates a reusable style block for background and text colors

D Sets default colors for the whole page

It creates a reusable style block (mixin) that sets background and text colors.

How do you apply a mixin named 'theme-colors' with colors #fff and #333?

A @include theme-colors(#fff, #333);

B @mixin theme-colors(#fff, #333);

C theme-colors(#fff, #333);

D @use theme-colors(#fff, #333);

You apply a mixin using @include followed by the mixin name and arguments.

Explain how mixins can be used to create different color themes in a website.

Think about how you can write one style block and change colors by giving different values.

Describe the steps to define and use a theming mixin in Sass.

Start with creating the mixin, then how to apply it with different colors.