Skip to content

Instantly share code, notes, and snippets.

@eddiesigner eddiesigner/_mixins.scss
Last active Jan 22, 2019

Embed
What would you like to do?
Useful Sass mixins
/* Media queries breakpoints */
$break-small: 35.5rem; // >= 568px @ 16px
$break-medium: 48rem; // >= 768px @ 16px
$break-large: 64rem; // >= 1024px @ 16px
$break-extra-large: 80rem; // >= 1280px @ 16px
$break-largest: 90rem; // >= 1440px @ 16px
/* Media query mixin */
@mixin respond-to( $condition ) {
@if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } }
@if $condition == 'small' { @media only screen and (min-width: $break-small) { @content; } }
@if $condition == 'medium' { @media only screen and (min-width: $break-medium) { @content; } }
@if $condition == 'large' { @media only screen and (min-width: $break-large) { @content; } }
@if $condition == 'extra-large' { @media only screen and (min-width: $break-extra-large) { @content; } }
@if $condition == 'largest' { @media only screen and (min-width: $break-largest) { @content; } }
}
/* Box shadow mixin */
@mixin bs($bsval: 0 0 0.83em #333, $due: 0 0 0 transparent) {
-moz-box-shadow: $bsval, $due;
-webkit-box-shadow: $bsval, $due;
-o-box-shadow: $bsval, $due;
box-shadow: $bsval, $due;
}
/* Transition mixin */
@mixin transition($transition: all linear 0.2s) {
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
-ms-transition: $transition;
transition: $transition;
}
/* Transform mixin */
@mixin transform($transform: translate3d(0, 0, 0)) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
/* Animation mixin */
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
/* Keyframes mixin */
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
/* Ellipsis mixin */
@mixin ellipsis($lines: 1, $font-size: 16px, $line-height: 1.3, $width: 100%) {
$height: ($font-size*$line-height*$lines) + ($line-height * 1.6);
display: block;
width: $width;
min-height: $height;
max-height: $height; // Fallback for non-webkit
font-size: $font-size;
line-height: $line-height;
white-space: nowrap;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
@opokugeorge

This comment has been minimized.

Copy link

commented Jan 21, 2019

Hello,

I have a profitable business/investment deal, I'd like to discuss with you if you give me permission, because we have not met each other before?i look for your reply. my email georgeopoku724@gmail.com

Thanks
Engineer George

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.