Mixins in SASS are reusable blocks of code that can accept arguments and include dynamic content. 1. Define a mixin using @mixin and include it with @include. 2. Pass arguments to make mixins flexible, with support for default values. 3. Use multiple or keyword arguments for complex configurations. 4. Utilize @content to inject dynamic CSS blocks, ideal for responsive design. 5. Follow best practices by using mixins for repeated style patterns, naming them clearly, and reserving functions for calculations, which keeps code DRY and maintainable.

Mixins in SASS are a powerful way to reuse styles across your CSS. They let you define reusable blocks of code, similar to functions, and include them wherever needed. Here's how to use them effectively.

What Is a Mixin?

A mixin is a reusable block of code that can take arguments (optional) and be included in other styles. Think of it like a function for CSS rules.

You define a mixin using the @mixin directive:

@mixin border-radius {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Then include it using @include:

.button {
  @include border-radius;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

This outputs standard CSS with all the prefixed rules applied.

Passing Arguments to Mixins

You can make mixins more flexible by passing arguments.

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

Now use it with different values:

.card {
  @include border-radius(10px);
}

.round-button {
  @include border-radius(50%);
}

You can also set default values:

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

Now if you call @include border-radius; without an argument, it uses 5px by default.

Advanced: Mixins with Multiple or Keyword Arguments

Mixins support multiple arguments and named (keyword) parameters.

@mixin box-shadow($h-offset, $v-offset, $blur: 4px, $color: #000) {
  box-shadow: $h-offset $v-offset $blur $color;
  -webkit-box-shadow: $h-offset $v-offset $blur $color;
  -moz-box-shadow: $h-offset $v-offset $blur $color;
}

Usage:

.panel {
  @include box-shadow(2px, 4px, 6px, rgba(0,0,0,0.3));
}

.tooltip {
  @include box-shadow(1px, 1px, $color: red); // uses keyword to skip $blur
}

This flexibility makes mixins great for complex, configurable styles.

Using @content for Dynamic Content

One advanced feature is @content, which lets you pass blocks of CSS into a mixin.

@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

Now you can inject styles:

.container {
  width: 100%;

  @include responsive(768px) {
    padding: 10px;
    font-size: 14px;
  }
}

This is especially useful for responsive design patterns.

Best Practices

• Use mixins for repeated style patterns (e.g., shadows, flex layouts, resets).
• Avoid overusing them for single-property rules unless they add value (like prefixes).
• Name them clearly and consistently.
• Prefer functions for calculations and mixins for style blocks.

Mixins help keep your SASS DRY (Don’t Repeat Yourself) and maintainable.

Basically, if you find yourself writing the same CSS over and over, wrap it in a mixin. It’s not magic, but it saves time and reduces errors.

The above is the detailed content of How to use mixins in SASS?. For more information, please follow other related articles on the PHP Chinese website!