SCSS Mixins and Functions Guide

Mixins — Reusable Style Blocks

A mixin is a group of CSS declarations you can reuse anywhere, optionally with arguments.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box { @include flex-center; }

Mixins with Parameters

@mixin button($bg, $color: white) {
  background: $bg;
  color: $color;
  padding: 10px 20px;
  border-radius: 6px;
}

.primary { @include button(#2563eb); }
.danger  { @include button(#dc2626, #fff); }

Functions — Return a Value

@function rem($px) {
  @return $px / 16 * 1rem;
}

.title { font-size: rem(32); } /* 2rem */

Built-in Functions

lighten($color, 10%)
darken($color, 10%)
rgba($color, 0.5)
mix($a, $b, 50%)

Mixin vs Function

	Mixin	Function
Returns	CSS rules	A value
Used with	@include	In a value

FAQs

Mixin or placeholder (%)?

Use %placeholder with @extend when there are no parameters to avoid duplicate output. More in our SCSS guides.

Can mixins have default values?

Yes — as shown with $color: white.