What are differences between mixins, extend and placeholders in Sass

Stylesheet development with SASS/SCSS, even when using its most basic features, like nesting properties or variables, saves valuable time and makes life easier for front-end developers. It’s not surprising that CSS pre-processors have been widely adopted as the de facto way of creating styles for websites and applications.

In this SASS/SCSS tutorial, we will explore how to use @mixins, @extend and placeholders and the difference between it.

How to use @mixins in SASS/SCSS

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin size. We’re also using the variable $width, $height inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

@mixin size($width: 100%, $height: 100%) {
  width: $width;
  height: $height;  
}

.img-fluid{
	@include size();
}

.avatar{
	@include size(50px, 50px);
}

.avatar-lg{
	@include size(60px, 60px);
}

Here is the result after compilation:

.img-fluid{
	width: 100%;
	height: 100%;
}

.avatar{
	width: 50px;
	height: 50px;
}

.avatar-lg{
	width: 60px;
	height: 60px;
}

How to use @extend in SASS/SCSS

.avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend .avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend .avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-status:before, .avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. With @extend, you can’t pass parameters during the extending, but that’s not the idea actually. @extend should be used in those places where you want to share properties between the elements.

The final code is still not perfect. That’s because the .avatar-status class is also written in our final .css file. You may not use it at all, so it will be good if it is hidden. To achieve this you could use placeholders.

How to use placeholders in SASS/SCSS

%avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend %avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend %avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Note that the CSS in %avatar-status isn’t generated, because %avatar-status is never extended.

Conclusion

SASS is wonderful new language. Although it may seem simple, it offers great benefits for developing theming and templates.

If useful, please share it.

#scss #sass #CSS3 #css