Skip to content

Instantly share code, notes, and snippets.

@ralexandr
Last active December 29, 2023 05:33
Show Gist options
  • Save ralexandr/76f4e2aa6ba7b0209fc4dc3dac0db050 to your computer and use it in GitHub Desktop.
Save ralexandr/76f4e2aa6ba7b0209fc4dc3dac0db050 to your computer and use it in GitHub Desktop.
SASS: Media queries + breakpoints
// Usage:
// .site-header {
// padding: 2rem;
// font-size: 1.8rem;
// @include mq('tablet-wide') {
// padding-top: 4rem;
// font-size: 2.4rem;
// }
// }
$breakpoints: (
"phone": 400px,
"phone-wide": 480px,
"phablet": 560px,
"tablet-small": 640px,
"tablet": 768px,
"tablet-wide": 1024px,
"desktop": 1248px,
"desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}
@Altinbyek
Copy link

how to writing @content

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment