Change scss breakpoints syntax

assets/_sass/layout/_layout.scss

 @import "sections";
 @import "footer";
 
-@media only screen and (min-width: 800px) { @import "800up"; }
-@media only screen and (min-width: 1200px) { @import "1200up"; }
\ No newline at end of file
+@include tablet-up { @import "tablet_up"; }
+@include desktop-only { @import "desktop_only"; }
\ No newline at end of file

assets/_sass/partials/_breakpoints.scss

+@mixin mobile-only {
+	@media only screen and (max-width: 800px) {
+		@content;
+	}
+}
+
+@mixin tablet-only {
+	@media only screen and (min-width: 800px) and (max-width: 1200px) {
+		@content;
+	}
+}
+
+@mixin desktop-only {
+	@media only screen and (min-width: 1200px) {
+		@content;
+	}
+}
+
+@mixin tablet-up {
+	@media only screen and (min-width: 800px) {
+		@content;
+	}
+}
+
+@mixin tablet-down {
+	@media only screen and (max-width: 1200px) {
+		@content;
+	}
+}
\ No newline at end of file

assets/css/style.scss

@@ -11,6 +11,7 @@
 // Import Partials
 @import "partials/typography";
 @import "partials/mixins";
+@import "partials/breakpoints";
 
 @import "colors/backgrounds";
 @import "colors/buttons";
@@ -35,19 +36,20 @@
 @import "layout/layout";
 
 // Pages
+@import "pages/home";
 @import "pages/courses";
 @import "pages/coding_gym";
 
 // Mobile up base styles
-@import "breakpoints/mobileup";
+@import "breakpoints/mobile_up";
 
 // Import media queries add more as you desire
-@media only screen and (min-width: 800px) {
-	@import "breakpoints/800up";
+@include tablet_up {
+	@import "breakpoints/tablet_up";
 }
 
-@media only screen and (min-width: 1200px) {
-	@import "breakpoints/1200up";
+@include desktop_only {
+	@import "breakpoints/desktop_only";
 }
 
 // If IE support is needed you can add them here or create another stylesheet for specific IE fixes
\ No newline at end of file