Mixins — SASS: Fundamentals of Operations

An important weapon in the SASS preprocessor's arsenal is mix-ins. - These are repeating portions of code that can be included in various selectors. Sounds like template selectors, doesn't it? In its basic form, it's just like that, but mix-ins have a lot more options.

First, let's deal with reusing styles. Let's create a basic style reset mix in.

To create a mix-in, you must specify the keyword @mixin and give it a unique name. Inside this mix-in, all the necessary rules are simply written down.

@mixin reset {
  margin: 0;
  padding: 0;
}

To include a mix-in in the selector, we use the @include keyword and then give the name of the mix-in we want to include. For example, let's reset the indents in the bulleted list.

@mixin reset {
  margin: 0;
  padding: 0;
}

ul {
  @include reset;
}

After compiling, we get the following CSS code:

ul {
  margin: 0;
  padding: 0;
}

It's also possible to nest mix-ins into each other, which allows you to make a new mix-in based on an existing one.

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin reset {
  margin: 0;
  padding: 0;
}

@mixin horizontal-menu {
  @include reset;
  @include flex-between;

  list-style: none;

  .menu-item {
    margin: 0 10px;
  }
}

.menu {
  &.horizontal-menu {
    @include horizontal-menu;
  }
}

Note that inside the horizontal-menu mix-in, we connected the two above mix-ins and then used it to style our menu. All styles from the flex-between and reset mix-ins will be inside the horizontal-menu mix-in. The final CSS code will look like this:

.menu.horizontal-menu {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.menu.horizontal-menu .menu-item {
  margin: 0 10px;
}

The preprocessor runs sequentially, so the order in which the mixins are included may make a difference in some cases. Don't forget to keep an eye on it. Also, don't forget to keep an eye on the nesting level of the mix-ins. Although SASS allows you to nest mix-ins within each other, I don't recommend going too deep. The more we nest mix-ins, the less control we have over the styles. Mix-ins are primarily designed to make it easier to write repeating CSS code. If you feel like you're going too deep with nesting, stop, breath, and think; maybe some styles should be used without mix-ins.

Mix-ins are often used for properties that need support in older browsers. Vendor prefixes are specified for these properties. If we use the box-shadow property, and we need support for older browsers like Firefox 3.5, Chrome 9, Safari 4.3, we should use the vendor prefixes -moz- and -webkit-. This is the kind of code we can use mix-ins for.

@mixin box-shadow-prefix {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.box-shadow {
  @include box-shadow-prefix;
}

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“