Added sass helper functions and mixins

src/stylesheets/abstracts/_functions.scss

@@ -0,0 +1,5 @@
+@use 'sass:color';
+
+@function darken-colour($colour, $amount: 15) {
+	@return color.scale($colour, $lightness: $amount * -1%);
+}

src/stylesheets/abstracts/_mixins.scss

@@ -15,3 +15,17 @@
 	}
 }
 
+@mixin respond-to($breakpoint) {
+	$value: map-get($breakpoints, $breakpoint);
+
+	@if $value != null {
+		@media (min-width: $value) {
+			@content;
+		}
+	}
+
+	@else {
+		@warn 'No value could be retrieved from `#{$breakpoint}`. '
+		+ 'Please make sure it is defined in `$breakpoints` map.';
+	}
+}

src/stylesheets/abstracts/_variables.scss

@@ -3,3 +3,15 @@ $text-font-stack: 'Roboto', 'Arial', sans-serif !default;
 
 // Colours
 $text-colour: rgb(34, 34, 34) !default;
+$primary-colour:  #d71433;
+$secondary-colour:  #46b43d;
+
+$primary-colour-dark: darken-colour($primary-colour);
+$secondary-colour-dark: darken-colour($secondary-colour);
+
+// Breakpoints
+$breakpoints: (
+	'small'  : 767px,
+	'medium' : 992px,
+	'large'  : 1200px
+);

src/stylesheets/main.scss

@@ -1,3 +1,4 @@
+@import 'abstracts/functions';
 @import 'abstracts/variables';
 @import 'abstracts/mixins';