Use single file for extends (#3216)

* Use single file for extends

* Update changelog

sass/utilities/_all.sass

@@ -1,8 +1,9 @@
 /* Bulma Utilities */
 @charset "utf-8"
 
-@import "initial-variables.sass"
-@import "functions.sass"
-@import "derived-variables.sass"
-@import "mixins.sass"
-@import "controls.sass"
+@import "initial-variables"
+@import "functions"
+@import "derived-variables"
+@import "mixins"
+@import "controls"
+@import "extends"

sass/utilities/controls.sass

@@ -1,4 +1,4 @@
-@import "derived-variables.sass"
+@import "derived-variables"
 
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
@@ -39,9 +39,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   fieldset[disabled] &
     cursor: not-allowed
 
-%control
-  +control
-
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small

sass/utilities/derived-variables.sass

@@ -1,5 +1,5 @@
-@import "initial-variables.sass"
-@import "functions.sass"
+@import "initial-variables"
+@import "functions"
 
 $primary: $turquoise !default
 

sass/utilities/extends.sass

@@ -0,0 +1,22 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay

sass/utilities/mixins.sass

@@ -161,9 +161,6 @@
   -ms-user-select: none
   user-select: none
 
-%unselectable
-  +unselectable
-
 =arrow($color: transparent)
   border: 3px solid $color
   border-radius: 2px
@@ -180,18 +177,12 @@
   transform-origin: center
   width: 0.625em
 
-%arrow
-  +arrow
-
 =block($spacing: $block-spacing)
   &:not(:last-child)
     margin-bottom: $spacing
 
-%block
-  +block
-
 =delete
-  @extend %unselectable
+  +unselectable
   -moz-appearance: none
   -webkit-appearance: none
   background-color: bulmaRgba($scheme-invert, 0.2)
@@ -256,9 +247,6 @@
     min-width: 32px
     width: 32px
 
-%delete
-  +delete
-
 =loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $grey-lighter
@@ -271,9 +259,6 @@
   position: relative
   width: 1em
 
-%loader
-  +loader
-
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -281,5 +266,3 @@
   right: $offset
   top: $offset
 
-%overlay
-  +overlay