Last active
March 11, 2024 07:52
-
-
Save esmaeilbahrani/e7970dbc071dff89f1e28e5015c1ec8c to your computer and use it in GitHub Desktop.
Responsive Design (SCSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Standard Breakpoints | |
$breakpoints: ( | |
xxs: 480px, | |
xs: 768px, | |
sm: 991px, | |
md: 1280px, | |
lg: 1920px, | |
); | |
// Function for handling breakpoints | |
@function breakpoint($breakpoint) { | |
$value: map-get($breakpoints, $breakpoint); | |
@if not $value { | |
@error "Invalid breakpoint: #{$breakpoint}."; | |
@return null; | |
} | |
@return $value; | |
} | |
// Function for handling custom sizes | |
@function custom-size($size, $type: max) { | |
@if not unitless($size) { | |
@error "Invalid custom size: #{$size}. Please provide a unitless value."; | |
@return null; | |
} | |
@if $type == max { | |
@return $size + px; // Add "px" to the size | |
} @else if $type == min { | |
@return $size + px; // Add "px" to the size | |
} @else { | |
@error "Invalid size type: #{$type}. Use 'min' or 'max'."; | |
@return null; | |
} | |
} | |
// Media queries mixin for breakpoints | |
@mixin break($breakpoint, $type: max) { | |
$value: breakpoint($breakpoint); | |
@if not $value { | |
@content; | |
} @else { | |
@if $type == max { | |
@media screen and (max-width: $value) { | |
@content; | |
} | |
} @else if $type == min { | |
@media screen and (min-width: $value) { | |
@content; | |
} | |
} @else { | |
@error "Invalid breakpoint type: #{$type}. Use 'min' or 'max'."; | |
} | |
} | |
} | |
// Mixin for handling custom sizes | |
@mixin breakSize($size, $type: max) { | |
$value: custom-size($size, $type); | |
@if not $value { | |
@content; | |
} @else { | |
@if $type == max { | |
@media screen and (max-width: #{$value}) { // Use interpolation here | |
@content; | |
} | |
} @else if $type == min { | |
@media screen and (min-width: #{$value}) { // Use interpolation here | |
@content; | |
} | |
} @else { | |
@error "Invalid size type: #{$type}. Use 'min' or 'max'."; | |
} | |
} | |
} | |
// Example usage | |
.element { | |
@include break(md, min) { | |
// Styles for medium-sized screens and larger | |
} | |
@include break(sm) { | |
// Styles for small-sized screens and smaller | |
} | |
@include breakSize(600, max) { | |
// Styles for screens up to 600px wide | |
} | |
@include breakSize(800, min) { | |
// Styles for screens at least 800px wide | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment