Mixins In Sass

In this tutorial, you will learn how to create and use mixins in Sass. We will start with a basic example of defining a mixin and then move on to more advanced topics, such as passing parameters to mixins and using mixins with conditionals. By the end of this tutorial, you will have a solid understanding of how to use mixins in Sass and how they can simplify your CSS development workflow.

Sass is a CSS preprocessor that adds advanced features like variables, mixins, and functions to CSS. Mixins are one of the most powerful features of Sass, as they allow you to define and reuse styles across multiple selectors.

Here’s a basic example of a mixin in Sass:

@mixin text-center {
  text-align: center;
}

.title {
  @include text-center;
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  @include text-center;
  font-size: 16px;
  font-weight: normal;
}

In this example, we have defined a mixin called text-center, which sets the text alignment to the center. Then, we use the @include directive to apply the mixin to two selectors .title and .subtitle.

When the Sass code is compiled, it will generate the following CSS:

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
}

As you can see, the styles defined in the text-center mixin have been copied to both selectors. This helps to avoid duplicating code and makes maintenance easier.

You can also pass parameters to mixins, just like a function. For example:

@mixin text-center($width) {
  text-align: center;
  width: $width;
}

.title {
  @include text-center(80%);
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  @include text-center(50%);
  font-size: 16px;
  font-weight: normal;
}

When the Sass code is compiled, it will generate the following CSS:

.title {
  text-align: center;
  width: 80%;
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  text-align: center;
  width: 50%;
  font-size: 16px;
  font-weight: normal;
}

As you can see, we passed a width parameter to the mixin and it was used to set the width of each selector.

This is just a simple example of what you can do with mixins in Sass. Mixins can be used for more complex styles and can even return values like functions. The power of mixins makes Sass a great tool for writing scalable and maintainable CSS.

Check our previous post about Sass here:

• What is Sass? https://www.nucleiotechnologies.com/what-is-sass/
• Nesting in Sass https://www.nucleiotechnologies.com/nesting-in-sass/