Use extends

sass/components/navbar.sass

@@ -178,6 +178,8 @@ a.navbar-link
 
 .navbar-link
   padding-right: 2.5em
+  &::after
+    +arrow($navbar-dropdown-arrow)
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -202,6 +204,9 @@ a.navbar-link
     .navbar-item
       align-items: center
       display: flex
+  .navbar-link
+    &::after
+      display: none
   .navbar-menu
     background-color: $navbar-background-color
     box-shadow: 0 8px 16px rgba($black, 0.1)
@@ -287,7 +292,6 @@ a.navbar-link
           transform: translateY(0)
   .navbar-link
     &::after
-      +arrow($navbar-dropdown-arrow)
       margin-top: -0.375em
       right: 1.125em
       top: 50%

sass/utilities/controls.sass

@@ -4,7 +4,7 @@ $control-radius-small: $radius-small !default
 $control-padding-vertical: calc(0.375em - 1px) !default
 $control-padding-horizontal: calc(0.625em - 1px) !default
 
-=control
+%control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
@@ -31,6 +31,9 @@ $control-padding-horizontal: calc(0.625em - 1px) !default
   &[disabled]
     cursor: not-allowed
 
+=control
+  @extend %control
+
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small

sass/utilities/mixins.sass

@@ -1,22 +1,5 @@
 @import "initial-variables"
 
-=arrow($color)
-  border: 1px solid $color
-  border-right: 0
-  border-top: 0
-  content: " "
-  display: block
-  height: 0.5em
-  pointer-events: none
-  position: absolute
-  transform: rotate(-45deg)
-  transform-origin: center
-  width: 0.5em
-
-=block
-  &:not(:last-child)
-    margin-bottom: 1.5rem
-
 =clearfix
   &:after
     clear: both
@@ -32,8 +15,143 @@
     left: calc(50% - (#{$width} / 2))
     top: calc(50% - (#{$width} / 2))
 
-=delete
+=fa($size, $dimensions)
-  +unselectable
+  display: inline-block
+  font-size: $size
+  height: $dimensions
+  line-height: $dimensions
+  text-align: center
+  vertical-align: top
+  width: $dimensions
+
+=hamburger($dimensions)
+  cursor: pointer
+  display: block
+  height: $dimensions
+  position: relative
+  width: $dimensions
+  span
+    background-color: currentColor
+    display: block
+    height: 1px
+    left: calc(50% - 8px)
+    position: absolute
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: background-color, opacity, transform
+    transition-timing-function: $easing
+    width: 16px
+    &:nth-child(1)
+      top: calc(50% - 6px)
+    &:nth-child(2)
+      top: calc(50% - 1px)
+    &:nth-child(3)
+      top: calc(50% + 4px)
+  &:hover
+    background-color: rgba(black, 0.05)
+  // Modifers
+  &.is-active
+    span
+      &:nth-child(1)
+        transform: translateY(5px) rotate(45deg)
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        transform: translateY(-5px) rotate(-45deg)
+
+=overflow-touch
+  -webkit-overflow-scrolling: touch
+
+=placeholder
+  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+  @each $placeholder in $placeholders
+    &:#{$placeholder}-placeholder
+      @content
+
+// Responsiveness
+
+=from($device)
+  @media screen and (min-width: $device)
+    @content
+
+=until($device)
+  @media screen and (max-width: $device - 1px)
+    @content
+
+=mobile
+  @media screen and (max-width: $tablet - 1px)
+    @content
+
+=tablet
+  @media screen and (min-width: $tablet), print
+    @content
+
+=tablet-only
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
+    @content
+
+=touch
+  @media screen and (max-width: $desktop - 1px)
+    @content
+
+=desktop
+  @media screen and (min-width: $desktop)
+    @content
+
+=desktop-only
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+    @content
+
+=widescreen
+  @media screen and (min-width: $widescreen)
+    @content
+
+=widescreen-only
+  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+    @content
+
+=fullhd
+  @media screen and (min-width: $fullhd)
+    @content
+
+// Placeholders
+
+%unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+=unselectable
+  @extend %unselectable
+
+%arrow
+  border: 1px solid transparent
+  border-right: 0
+  border-top: 0
+  content: " "
+  display: block
+  height: 0.5em
+  pointer-events: none
+  position: absolute
+  transform: rotate(-45deg)
+  transform-origin: center
+  width: 0.5em
+
+=arrow($color)
+  @extend %arrow
+  border-color: $color
+
+%block
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+
+=block
+  @extend %block
+
+%delete
+  @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
   background-color: rgba($black, 0.2)
@@ -97,51 +215,10 @@
     min-width: 32px
     width: 32px
 
-=fa($size, $dimensions)
+=delete
-  display: inline-block
+  @extend %delete
-  font-size: $size
-  height: $dimensions
-  line-height: $dimensions
-  text-align: center
-  vertical-align: top
-  width: $dimensions
 
-=hamburger($dimensions)
+%loader
-  cursor: pointer
-  display: block
-  height: $dimensions
-  position: relative
-  width: $dimensions
-  span
-    background-color: currentColor
-    display: block
-    height: 1px
-    left: calc(50% - 8px)
-    position: absolute
-    transform-origin: center
-    transition-duration: $speed
-    transition-property: background-color, opacity, transform
-    transition-timing-function: $easing
-    width: 16px
-    &:nth-child(1)
-      top: calc(50% - 6px)
-    &:nth-child(2)
-      top: calc(50% - 1px)
-    &:nth-child(3)
-      top: calc(50% + 4px)
-  &:hover
-    background-color: rgba(black, 0.05)
-  // Modifers
-  &.is-active
-    span
-      &:nth-child(1)
-        transform: translateY(5px) rotate(45deg)
-      &:nth-child(2)
-        opacity: 0
-      &:nth-child(3)
-        transform: translateY(-5px) rotate(-45deg)
-
-=loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $border
   border-radius: $radius-rounded
@@ -153,71 +230,20 @@
   position: relative
   width: 1em
 
-=overflow-touch
+=loader
-  -webkit-overflow-scrolling: touch
+  @extend %loader
+
+%overlay
+  bottom: 0
+  left: 0
+  position: absolute
+  right: 0
+  top: 0
 
 =overlay($offset: 0)
-  bottom: $offset
+  @extend %overlay
-  left: $offset
+  @if $offset != 0
-  position: absolute
+    bottom: $offset
-  right: $offset
+    left: $offset
-  top: $offset
+    right: $offset
-
+    top: $offset
-=placeholder
-  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
-  @each $placeholder in $placeholders
-    &:#{$placeholder}-placeholder
-      @content
-
-=unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-
-// Responsiveness
-
-=from($device)
-  @media screen and (min-width: $device)
-    @content
-
-=until($device)
-  @media screen and (max-width: $device - 1px)
-    @content
-
-=mobile
-  @media screen and (max-width: $tablet - 1px)
-    @content
-
-=tablet
-  @media screen and (min-width: $tablet), print
-    @content
-
-=tablet-only
-  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
-    @content
-
-=touch
-  @media screen and (max-width: $desktop - 1px)
-    @content
-
-=desktop
-  @media screen and (min-width: $desktop)
-    @content
-
-=desktop-only
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
-    @content
-
-=widescreen
-  @media screen and (min-width: $widescreen)
-    @content
-
-=widescreen-only
-  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
-    @content
-
-=fullhd
-  @media screen and (min-width: $fullhd)
-    @content