Last active
March 26, 2021 10:17
-
-
Save patiboh/e9f71f158954697ff00edaea4c9c4ef4 to your computer and use it in GitHub Desktop.
SASS - Utility 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
| //== Layout | |
| // | |
| @mixin full_width { | |
| position: relative; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| } | |
| @mixin centered-content { | |
| position: absolute; | |
| top : 50%; | |
| left : 50%; | |
| -moz-transform : translate(-50%, -50%); | |
| -o-transform : translate(-50%, -50%); | |
| -webkit-transform: translate(-50%, -50%); | |
| transform : translate(-50%, -50%); | |
| } | |
| //== Images | |
| // | |
| @mixin aspect-ratio($width, $height) { | |
| position: relative; | |
| &:before { | |
| display: block; | |
| content: ""; | |
| width: 100%; | |
| padding-top: ($height / $width) * 100%; | |
| } | |
| > %content { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| } | |
| /* usage */ | |
| .aspect-ratio-16-9 { | |
| @include aspect-ratio(16,9); | |
| } | |
| @mixin cover { | |
| background-position: center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| /* usage */ | |
| .cover { | |
| @include cover; | |
| } | |
| //== Media Queries : use "mobile first" method | |
| // i.e. default styles are for mobile (with no media queries), then use cascading media queries to adapt styles for larger devices | |
| /* Custom Extra small devices */ | |
| @mixin screen-xxs { | |
| @media (min-width: #{$screen-xxs-min}) { | |
| @content; | |
| } | |
| } | |
| /* Custom, iPhone Retina */ | |
| @mixin screen-xs { | |
| @media (min-width: #{$screen-xs-min}) { | |
| @content; | |
| } | |
| } | |
| /* Extra Small Devices, Phones */ | |
| @mixin screen-sm { | |
| @media (min-width: #{$screen-sm-min}){ | |
| @content; | |
| } | |
| } | |
| /* Extra Small Devices, Phones */ | |
| @mixin screen-md { | |
| @media (min-width: #{$screen-md-min}){ | |
| @content; | |
| } | |
| } | |
| /* Small Devices, Tablets */ | |
| @mixin screen-lg { | |
| @media (min-width: #{$screen-lg-min}){ | |
| @content; | |
| } | |
| } | |
| /* Desktop - used for navbar breakpoint // do not change !!*/ | |
| @mixin screen-xl { | |
| @media (min-width: #{$screen-xl-min}){ | |
| @content; | |
| } | |
| } | |
| //== Responsive mixins of commonly used measures | |
| // | |
| /* The values must correspond to body-padding (see mixin below)*/ | |
| @mixin navbar-height { | |
| height: $navbar-height-sm; | |
| @include screen-lg { | |
| height: $navbar-height-lg; | |
| } | |
| } | |
| /* Extend this class in sass files for better CSS output */ | |
| .navbar-height { | |
| @include navbar-height; | |
| } | |
| /* The values must correspond to navbar-height (see mixin above)*/ | |
| @mixin body-padding { | |
| padding-top: $navbar-height-sm; | |
| @include screen-lg { | |
| padding-top: $navbar-height-lg; | |
| } | |
| } | |
| /* Extend this class in sass files for better CSS output */ | |
| .body-padding { | |
| @include body-padding; | |
| } | |
| // Other Utilities | |
| // Remove the unit of a value | |
| @function strip-unit($num) { | |
| @return $num / ($num * 0 + 1); | |
| } | |
| /* Misc mixins | |
| -------------------------------------------------------------- */ | |
| //Hover Active Focus pseudo selector mixin | |
| @mixin hover { | |
| &:hover, &:active, &:focus { | |
| @content; | |
| } | |
| } | |
| //Animations based on animate.css | |
| .animate { | |
| @include animation-duration(0.5s); | |
| @include animation-timing-function(ease); | |
| @include animation-fill-mode(both); | |
| } | |
| .fadeIn { | |
| @include animation-name(fadeIn); | |
| } | |
| .fadeinRight { | |
| @include animation-name(fadeInRight); | |
| } | |
| .fadeinUp { | |
| @include animation-name(fadeInUp); | |
| } | |
| //Keyframes | |
| @include keyframes(fadeIn) { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @include keyframes(fadeInUp) { | |
| from { | |
| opacity: 0; | |
| @include transform(translate3d(0, 100%, 0)); | |
| } | |
| to { | |
| opacity: 1; | |
| @include transform(none); | |
| } | |
| } | |
| @include keyframes(fadeInRight) { | |
| from { | |
| opacity: 0; | |
| @include transform(translate3d(100%, 0, 0)); | |
| } | |
| to { | |
| opacity: 1; | |
| @include transform(none); | |
| } | |
| } | |
| @mixin vertical-align($position: relative) { | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translate(0, -50%); | |
| -moz-transform: translate(0, -50%); | |
| -ms-transform: translate(0, -50%); | |
| -o-transform: translate(0, -50%); | |
| transform: translate(0, -50%); | |
| } | |
| // /* REM mixin : produces REM values with px fallback | |
| // * Use this in conjunction with body{font-size:10px;} for base 10 conversion | |
| // * ( see also: _globals.scss ) */ | |
| @function calculateRem($font-size) { | |
| $unitless_value: strip-unit($font-size); | |
| $remSize: $unitless_value / 16; | |
| @return #{$remSize}; | |
| } | |
| @mixin px-to-rem($size) { | |
| font-size: ($size); //Fallback in px | |
| font-size: calculateRem($size) + rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment