sass SCSS vs Sass Mixins


Example

Sass tends to be the more "lazy" syntax. Nothing illustrates this nicer than how you define and include mixins.

Defining a mixin

= is how you define a mixin in Sass, @mixin in SCSS.

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

Including a mixin

+ is how you include in Sass, @include in SCSS.

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)