Sass Mixin Basics

Watch "Creating basic mixins" on LinkedIn Learning

Mixins are like functions that return CSS styles. They allow you define a style that can then be reused through a stylesheet. Mixins are defined using the @mixin at-rule, and, like functions, mixins can also take arguments. Finally, mixins can be used inside style rules using the @include at-rule.

@mixin backImage ($image) {
  background-image: url($image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.jumbotron {
	@include backImage('../images/water.jpg');
}

.bridge {
	@include backImage('../images/bridge.jpg');
}

.jumbotron {
  background: url("../images/water.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.bridge {
  background: url("../images/bridge.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Try it yourself on Sassmeister