Skip to content

Sass

Mixins

Sass: @mixin and @include

Mixin vs Function

@function returns a value

@mixin returns CSS

Using mixins

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul {
  @include reset-list;
}

Mixins with variables where you can set the property

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

Mixins with optional params

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

Taking Arbitrary arguments[]()

Loops

????


Last update: 2022-11-04