scss 更多Handy Sass Mixins

Posted 2021-05-18

// Set all transitions across browsers
@mixin transition($property: all, $duration: .4s, $easing: ease-in-out) {
	-webkit-transition: $property, $duration, $easing;
	-moz-transition: $property, $duration, $easing;
	-ms-transition: $property, $duration, $easing;
	-o-transition: $property, $duration, $easing;
	transition: $property, $duration, $easing;
}

// Set drop shadows on elements
@mixin box-shadow($top, $left, $blur, $color, $inset: false, $spread: 0) {
	@if $inset {
		-webkit-box-shadow:inset $top $left $blur $spread $color;
		-o-box-shadow:inset $top $left $blur $spread $color;
		-moz-box-shadow:inset $top $left $blur $spread $color;
		box-shadow:inset $top $left $blur $spread $color;
	} @else {
		-webkit-box-shadow: $top $left $blur $spread $color;
		-o-box-shadow: $top $left $blur $spread $color;
		-moz-box-shadow: $top $left $blur $spread $color;
		box-shadow: $top $left $blur $spread $color;
	}
}

// Sets rounded corners on elements
@mixin rounded($radius: 0.3em) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

// Sets shadows on text if desired
@mixin text-shadow($top: 0, $left: 1px, $blur: 1px, $color: rgba(0,0,0,.3)) {
	text-shadow: $top $left $blur $color;
}

//cross browser opacity
@mixin opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity=$opacity-ie); //IE8
}

// set a rem font size with a pixel fallback
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
// USAGE
p {
  @include font-size(14px)
}

//BREAKPOINTS
@mixin bp-large {
  @media only screen and (max-width: 60em) {
    @content;
  }
}
@mixin bp-medium {
  @media only screen and (max-width: 40em) {
    @content;
  }
}
@mixin bp-small {
  @media only screen and (max-width: 30em) {
    @content;
  }
}
// USAGE
.sidebar {
  width: 60%;
  @include bp-small {
    width: 100%;
  }
}


// KEYFRAMES CROSSBROWSER
@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}
// USAGE
@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}