scss #sass我的一些用于SASS / Compass的goto mixins

Posted 2021-05-18

// Video iframe
@mixin video-wrapper {
  width: 100%;
  height: 0;
  margin-bottom: 1.5em;
  padding-top: 25px;
  padding-bottom: 56.25%;
  float: none;
  clear: both;
  position: relative;

  iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

// Media Queries
// http://css-tricks.com/naming-media-queries
@mixin bp($point) {
  //max-width
  @if $point == max991 {
    @media (max-width: 991px)  { @content; }
  }
  @else if $point == max880 {
    @media (max-width: 880px) { @content; }
  }
  @else if $point == max767 {
    @media (max-width: 767px)  { @content; }
  }
  @else if $point == max600 {
    @media (max-width: 600px)  { @content; }
  }
  @else if $point == max479 {
    @media (max-width: 479px)  { @content; }
  }
  @else if $point == max320 {
    @media (max-width: 320px)  { @content; }
  }
  //iOS
  @else if $point == iOS {
    @media only screen and (orientation:portrait) and (device-width: 320px), (device-width: 768px) { @content; }
    @media only screen and (orientation:landscape) and (device-width: 320px), (device-width: 768px) { @content; }
  }
}

// Gradient
// scss - @include gradient(#top_color, #bottom_color);
@mixin gradient($from, $to) { //vertical
	background-color: $from;
	background-image: -moz-linear-gradient(top, $from, $to); // FF 3.6+
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(top, $from, $to); // Safari 5.1+, Chrome 10+
	background-image: -o-linear-gradient(top, $from, $to); // Opera 11.10
	background-image: linear-gradient(to bottom, $from, $to); // Standard, IE10
	background-repeat: repeat-x;
	//filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to', GradientType=0); // IE9 and down
}

@mixin gradient_h($from, $to) { //horizontal
	background-color: $from;
	background-image: -moz-linear-gradient(left, $from, $to); // FF 3.6+
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from($from), to($to)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(left, $from, $to); // Safari 5.1+, Chrome 10+
	background-image: -o-linear-gradient(left, $from, $to); // Opera 11.10
	background-image: linear-gradient(to right, $from, $to); // Standard, IE10
	background-repeat: repeat-y;
	//filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to', GradientType=1); // IE9 and down
}

// Button mixin
@mixin link-button($btnColor) {
  color: $white;
  font-size: 0.9em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-decoration: none;
  background-color: $btnColor;
  @include box-shadow(0 1px 2px rgba(0,0,0,0.2));
  border: 1px solid darken($btnColor, 3%);
  @include border-radius(2px);
  padding: 7px 14px 6px;
  @include transition(all 0.15s ease-out);

  &:hover {
    color: $white;
    text-decoration: none;
    background-color: lighten($btnColor, 10%);
    border-color: $btnColor;
    @include box-shadow(none);
  }
}

// Animation ex(loading, 1s, ease-in, infinite, 0s)
@mixin animation($name, $duration, $timing, $count, $delay) {
  -webkit-animation-name: $name;
     -moz-animation-name: $name;
      -ms-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
      -ms-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;
  -webkit-animation-timing-function: $timing;
     -moz-animation-timing-function: $timing;
      -ms-animation-timing-function: $timing;
       -o-animation-timing-function: $timing;
          animation-timing-function: $timing;
  -webkit-animation-iteration-count: $count;
     -moz-animation-iteration-count: $count;
      -ms-animation-iteration-count: $count;
       -o-animation-iteration-count: $count;
          animation-iteration-count: $count;
  -webkit-animation-delay: $delay;
     -moz-animation-delay: $delay;
      -ms-animation-delay: $delay;
       -o-animation-delay: $delay;
          animation-delay: $delay;
}

@mixin keyframes($name) {
  @-webkit-keyframes $name { @content; }
     @-moz-keyframes $name { @content; }
      @-ms-keyframes $name { @content; }
       @-o-keyframes $name { @content; }
          @keyframes $name { @content; }
}