Skip to content

Instantly share code, notes, and snippets.

@polarbirke

polarbirke/input.scss

Created March 29, 2021 18:21
Show Gist options
  • Save polarbirke/e2545aac7f04e6d574b668b24e1021c4 to your computer and use it in GitHub Desktop.
Save polarbirke/e2545aac7f04e6d574b668b24e1021c4 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$page-max-width: 1170px;
$unit: 30px;
$screen-xs: 480px !default;
$screen-sm: 768px !default;
$screen-md: 992px !default;
$screen-lg: 1200px !default;
$navigation-breakpoint: 1140px !default; // ergibt sich aus Umbruchbeginn der Hauptnavigationspunkte
//// Breakpoints-Map für media mixin
$breakpoints: (
screen-xs: $screen-xs,
screen-sm: $screen-sm,
screen-md: $screen-md,
screen-lg: $screen-lg,
navigation-breakpoint: $navigation-breakpoint,
page-max-width: $page-max-width,
page-max-width-and-padding: $page-max-width + $unit*2,
) !default;
$breakpoints: map-merge($breakpoints, (
navigation-breakpoint: 1270px
)
);
.screen-lg {
width: map-get($breakpoints, 'screen-lg');
}
.navigation-breakpoint {
width: map-get($breakpoints, 'navigation-breakpoint');
}
.page-max-width {
width: map-get($breakpoints, 'page-max-width');
}
Raw
output.css
.screen-lg {
width: 1200px;
}
.navigation-breakpoint {
width: 1270px;
}
.page-max-width {
width: 1170px;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment