diff --git a/src/scss/_setting.scss b/src/scss/_setting.scss
index 26bd64a6..caeeb566 100644
--- a/src/scss/_setting.scss
+++ b/src/scss/_setting.scss
@@ -50,3 +50,16 @@ $buttons: (
         )
     )
 );
+
+
+/**
+ * Separator
+ */
+
+$separators: (
+    base: (
+        color                   : color(neutral, light),
+        style                   : solid,
+        width                   : 1px
+    )
+);
diff --git a/src/scss/chopchop-ui.scss b/src/scss/chopchop-ui.scss
index 4f0049fd..e04a2452 100644
--- a/src/scss/chopchop-ui.scss
+++ b/src/scss/chopchop-ui.scss
@@ -1,5 +1,7 @@
 @import "var";
-@import "helper/function";
+@import "helper/variable-function";
+@import "setting";
+@import "helper/setting-function";
 @import "helper/flex";
 @import "helper/breakpoint";
 @import "helper/shape";
diff --git a/src/scss/helper/_button.scss b/src/scss/helper/_button.scss
index 30a8bb23..08d50396 100644
--- a/src/scss/helper/_button.scss
+++ b/src/scss/helper/_button.scss
@@ -1,11 +1,3 @@
-/**
- * Button color
- */
-
-@function button($button: 'base', $state: 'default', $var: 'color') {
-    @return map-get(map-get(map-get($buttons, $button), $state), $var);
-}
-
 /**
  * Generate colours for buttons
  */
diff --git a/src/scss/helper/_setting-function.scss b/src/scss/helper/_setting-function.scss
new file mode 100644
index 00000000..5ac8deb4
--- /dev/null
+++ b/src/scss/helper/_setting-function.scss
@@ -0,0 +1,16 @@
+/**
+ * Button
+ */
+
+@function button($button: 'base', $state: 'default', $var: 'color') {
+    @return map-get(map-get(map-get($buttons, $button), $state), $var);
+}
+
+
+/**
+ * Separator
+ */
+
+@function seperator($seperator, $var: 'width') {
+    @return map-get(map-get($separators, $seperator), $var);
+}
diff --git a/src/scss/helper/_function.scss b/src/scss/helper/_variable-function.scss
similarity index 100%
rename from src/scss/helper/_function.scss
rename to src/scss/helper/_variable-function.scss
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index ad2cce89..3400c0df 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -3,13 +3,7 @@
  */
 
 @import "var";
-
-
-/**
- * Functions to reference arrays
- */
-
-@import "helper/function";
+@import "helper/variable-function";
 
 
 /**
@@ -17,7 +11,7 @@
  */
 
 @import "setting";
-
+@import "helper/setting-function";
 
 /**
  * Helper Mixins
diff --git a/src/scss/utility/_separator.scss b/src/scss/utility/_separator.scss
index c5d30814..d70ffb41 100644
--- a/src/scss/utility/_separator.scss
+++ b/src/scss/utility/_separator.scss
@@ -4,27 +4,29 @@
  * @since 3.0.0
  */
 
-.u-separator,
-%u-separator {
-    border: 1px solid color(neutral, light);
+@function seperator($seperator, $var: 'width') {
+    @return map-get(map-get($separators, $seperator), $var);
 }
 
-.u-separator-top,
-%u-separator-top {
-    border-top: 1px solid color(neutral, light);
-}
+$seperator-sides: (base, top, left, bottom, right);
 
-.u-separator-bottom,
-%u-separator-bottom {
-    border-bottom: 1px solid color(neutral, light);
-}
+@each $key, $value in $separators {
+    $class: 'u-separator-' + $key;
+    @if($key == base) {
+         $class: 'u-separator';
+    }
 
-.u-separator-left,
-%u-separator-left {
-    border-left: 1px solid color(neutral, light);
+    @each $side in $seperator-sides {
+        @if($side == base) {
+            .#{$class},
+            %#{$class} {
+                border: seperator($key, width) seperator($key, style) seperator($key, color);
+            }
+        } @else {
+            .#{$class}-#{$side},
+            %#{$class}-#{$side} {
+                border-#{$side}: seperator($key, width) seperator($key, style) seperator($key, color);
+            }
+        }
+    }
 }
-
-.u-separator-right,
-%u-separator-right {
-    border-right: 1px solid color(neutral, light);
-}
\ No newline at end of file