Change scss breakpoints syntax

parent 0992a179
@import "sections"; @import "sections";
@import "footer"; @import "footer";
@media only screen and (min-width: 800px) { @import "800up"; } @include tablet-up { @import "tablet_up"; }
@media only screen and (min-width: 1200px) { @import "1200up"; } @include desktop-only { @import "desktop_only"; }
\ No newline at end of file \ No newline at end of file
@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
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// Import Partials // Import Partials
@import "partials/typography"; @import "partials/typography";
@import "partials/mixins"; @import "partials/mixins";
@import "partials/breakpoints";
@import "colors/backgrounds"; @import "colors/backgrounds";
@import "colors/buttons"; @import "colors/buttons";
...@@ -35,19 +36,20 @@ ...@@ -35,19 +36,20 @@
@import "layout/layout"; @import "layout/layout";
// Pages // Pages
@import "pages/home";
@import "pages/courses"; @import "pages/courses";
@import "pages/coding_gym"; @import "pages/coding_gym";
// Mobile up base styles // Mobile up base styles
@import "breakpoints/mobileup"; @import "breakpoints/mobile_up";
// Import media queries add more as you desire // Import media queries add more as you desire
@media only screen and (min-width: 800px) { @include tablet_up {
@import "breakpoints/800up"; @import "breakpoints/tablet_up";
} }
@media only screen and (min-width: 1200px) { @include desktop_only {
@import "breakpoints/1200up"; @import "breakpoints/desktop_only";
} }
// If IE support is needed you can add them here or create another stylesheet for specific IE fixes // If IE support is needed you can add them here or create another stylesheet for specific IE fixes
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment