Last active
February 24, 2022 05:58
-
-
Save Gokhan-Unal/5bb5284addf707b12220e78270dc2bf0 to your computer and use it in GitHub Desktop.
CSS Some Mixins
This file contains hidden or 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
| /* Mixin for media queries */ | |
| @mixin screenSize($size) { | |
| @if ($size == 'xxlarge') { | |
| @media screen and (max-width: 1480px) { | |
| @content; | |
| } | |
| } | |
| @if ($size == 'xlarge') { | |
| @media screen and (max-width: 1200px) { | |
| @content; | |
| } | |
| } | |
| @if ($size == 'large') { | |
| @media screen and (max-width: 992px) { | |
| @content; | |
| } | |
| } | |
| @if $size== 'medium' { | |
| @media screen and (max-width: 768px) { | |
| @content; | |
| } | |
| } | |
| @if $size== 'small' { | |
| @media screen and (max-width: 612px) { | |
| @content; | |
| } | |
| } | |
| @if $size== 'xsmall' { | |
| @media screen and (max-width: 400px) { | |
| @content; | |
| } | |
| } | |
| } | |
| /* Mixin for flexbox */ | |
| @mixin display-flex( | |
| $flex-direction: row, | |
| $align-items: unset, | |
| $justify-content: unset | |
| ) { | |
| display: flex; | |
| flex-direction: $flex-direction; | |
| align-items: $align-items; | |
| justify-content: $justify-content; | |
| } | |
| /*Usage:*/ | |
| @include display-flex(column, center, center); | |
| @include screenSize('large') { | |
| width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment