ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replacing breakpoint-sass module with custom mixin.

Browse source
This commit is contained in:
Fredrik Jonsson 2019-02-25 09:05:31 +01:00
commit 601c74f6f4
2 changed files with 186 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

28
sass/init/_variables.scss
View file

@ -120,23 +120,19 @@ $auto-print-sizing: false;
// Breakpoints
//
// Use the `respond-to()` mixin to use named breakpoints. Documentation is
// available in the [Breakpoint wiki
// pages](https://github.com/at-import/breakpoint/wiki/Respond-To).
@include add-breakpoint(xxxs, (333px, 'no-query' true));
@include add-breakpoint(xxs, (444px, 'no-query' true));
@include add-breakpoint(xs, (555px, 'no-query' true));
@include add-breakpoint(s, (666px, 'no-query' true));
@include add-breakpoint(m, (777px, 'no-query' true));
@include add-breakpoint(l, (888px, 'no-query' true));
@include add-breakpoint(xl, (999px, 'no-query' true));
@include add-breakpoint(xxl, (1111px));
@include add-breakpoint(xxxl, (1222px));
// Output media queries where the above px are converted to ems.
// @include breakpoint-set('to ems', true);
// Use the `respond-to()` mixin to use named breakpoints.
$breakpoints: (
'xxxs': 333px,
'xxs': 444px,
'xs': 555px,
's': 666px,
'm': 777px,
'l': 888px,
'xl': 999px,
'xxl': 1111px,
'xxxl': 1222px
) !default;
// Layout

9
sass/init/breakpoint/_respond-to.scss Normal file
View file

@ -0,0 +1,9 @@
@mixin respond-to($breakpoint) {
// If the key exists in the map
@if map-has-key($breakpoints, $breakpoint) {
// Prints a media query based on the value
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}