Last active
April 9, 2019 12:02
-
-
Save alumican/5b7e41d255f7f74bb4225447770ea278 to your computer and use it in GitHub Desktop.
SASS tips
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
// ---------------------------------------- | |
// Config | |
$image-directory: './image'; | |
$bp-narrow-mobile : 320px; | |
$bp-mobile-tablet : 480px; | |
$bp-tablet-desktop: 800px; | |
// ---------------------------------------- | |
// Path | |
@function image-url($filename) { | |
@return url($image-directory + $filename); | |
} | |
// ---------------------------------------- | |
// Centering | |
@mixin centering-absolute-x { | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
@mixin centering-absolute-y { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
margin-top: auto; | |
margin-bottom: auto; | |
} | |
@mixin centering-absolute { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
} | |
@mixin centering-transform-x { | |
position: absolute; | |
left: 50%; | |
transform: translateX(-50%); | |
} | |
@mixin centering-transform-y { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
@mixin centering-transform { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50% -50%); | |
} | |
// ---------------------------------------- | |
// Text | |
@mixin enable-text($font-size: 1rem, $line-height: 150%) { | |
font-size: $font-size; | |
line-height: $line-height; | |
} | |
@mixin disable-text { | |
font-size: 0; | |
line-height: 0; | |
} | |
// ---------------------------------------- | |
// Responsive query | |
// $bp-narrow-mobile < mobile <= $bp-mobile-tablet < tablet <= $bp-tablet-desktop < desktop | |
@mixin narrow { | |
@media screen and (max-width: $bp-narrow-mobile) { | |
@content; | |
} | |
} | |
@mixin mobile { | |
@media screen and (min-width: $bp-narrow-mobile + 1px) and (max-width: $bp-mobile-tablet) { | |
@content; | |
} | |
} | |
@mixin tablet { | |
@media screen and (min-width: $bp-mobile-tablet + 1px) and (max-width: $bp-tablet-desktop) { | |
@content; | |
} | |
} | |
@mixin desktop { | |
@media screen and (min-width: $bp-tablet-desktop + 1px) { | |
@content; | |
} | |
} | |
@mixin not-narrow { | |
@media screen and (min-width: $bp-narrow-mobile + 1px) { | |
@content; | |
} | |
} | |
@mixin not-mobile { | |
@media screen and (max-width: $bp-narrow-mobile), screen and (min-width: $bp-mobile-tablet + 1px) { | |
@content; | |
} | |
} | |
@mixin not-tablet { | |
@media screen and (max-width: $bp-mobile-tablet), screen and (min-width: $bp-tablet-desktop + 1px) { | |
@content; | |
} | |
} | |
@mixin not-desktop { | |
@media screen and (max-width: $bp-tablet-desktop) { | |
@content; | |
} | |
} | |
@mixin gt-mobile { | |
@media screen and (min-width: $bp-narrow-mobile + 1px) { | |
@content; | |
} | |
} | |
@mixin gt-tablet { | |
@media screen and (min-width: $bp-mobile-tablet + 1px) { | |
@content; | |
} | |
} | |
@mixin gt-desktop { | |
@media screen and (min-width: $bp-tablet-desktop + 1px) { | |
@content; | |
} | |
} | |
@mixin lt-narrow { | |
@media screen and (max-width: $bp-narrow-mobile) { | |
@content; | |
} | |
} | |
@mixin lt-mobile { | |
@media screen and (max-width: $bp-mobile-tablet) { | |
@content; | |
} | |
} | |
@mixin lt-tablet { | |
@media screen and (max-width: $bp-tablet-desktop) { | |
@content; | |
} | |
} | |
.narrow { | |
@include not-narrow { | |
display: none; | |
} | |
} | |
.mobile { | |
@include not-mobile { | |
display: none; | |
} | |
} | |
.tablet { | |
@include not-tablet { | |
display: none; | |
} | |
} | |
.desktop { | |
@include not-desktop { | |
display: none; | |
} | |
} | |
.not-narrow { | |
@include narrow { | |
display: none; | |
} | |
} | |
.not-mobile { | |
@include mobile { | |
display: none; | |
} | |
} | |
.not-tablet { | |
@include tablet { | |
display: none; | |
} | |
} | |
.not-desktop { | |
@include desktop { | |
display: none; | |
} | |
} | |
.gt-mobile { | |
@include lt-narrow { | |
display: none; | |
} | |
} | |
.gt-tablet { | |
@include lt-mobile { | |
display: none; | |
} | |
} | |
.gt-desktop { | |
@include lt-tablet { | |
display: none; | |
} | |
} | |
.lt-narrow { | |
@include gt-mobile { | |
display: none; | |
} | |
} | |
.lt-mobile { | |
@include gt-tablet { | |
display: none; | |
} | |
} | |
.lt-tablet { | |
@include gt-desktop { | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment