Useful Sass mixins

_mixins.scss

/* 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;
}

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 [email protected]

Thanks
Engineer George