What are the differences between mixins and functions in CSS?

What are the differences between mixins and functions in CSS?

Mixins and functions in CSS are both used to reuse code, but they serve different purposes. Mixins allow you to include a set of styles in multiple places, while functions return a value that can be used in styles.

Can you give me an example of a mixin?

Sure! A mixin in SCSS could look like this:

@mixin rounded-corners($radius) {
  border-radius: $radius;
}

You can then use it like this:

.box {
  @include rounded-corners(10px);
}

And how about a function?

An example of a function in SCSS is:

@function calculate-rem($pixels) {
  @return $pixels / 16 * 1rem;
}

You can use it like this:

font-size: calculate-rem(24px);

So, mixins are for styles and functions are for values?

Exactly! Mixins are great for applying styles, while functions are used to compute values.