scss Mixins有用

Posted 2021-05-17

// Apply a gradient to text
// https://css-tricks.com/snippets/css/gradient-text/
@mixin text-gradient($direction, $color, $colors...) {
  // Fix display property
  display: inline-block;
  // Define default color
  color: $color;

  // Modernizr
  .backgroundcliptext & {
    // Define gradient based on params
    background: linear-gradient($direction, $colors);
    // Clip background to text
    -webkit-background-clip: text;
    // Fill text with transparent white
    // This prevents some issues on Safari with transparent colors
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    //-webkit-text-fill-color: hsla(0,0%,100%,0);
  }
}


// This mixin can be used to set the object-fit:
// @include object-fit(contain);
// or object-fit and object-position:
// @include object-fit(cover, top);
@mixin object-fit($fit: fill, $position: null) {
  -o-object-fit: $fit;
     object-fit: $fit;

  @if $position {
    -o-object-position: $position;
       object-position: $position;
    font-family: 'object-fit: #{$fit}; object-position: #{$position}';
  } @else {
    font-family: 'object-fit: #{$fit}';
  }
}

@mixin aspect-ratio($width, $height) {
  position: relative;
  
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@mixin line($time: 0.3s){
  transform: scaleX(0);
  transform-origin: 100% 0;
  transition: transform $time $custom-easing-1;
}
@mixin line-hover(){
  transform: scaleX(1);
  transform-origin: 0 0;
}

@mixin line-left($time: 0.3s){
  transform: scaleX(0);
  transform-origin:  0 100%;
  transition: transform $time $custom-easing-1;
}
@mixin line-left-hover(){
  transform: scaleX(1);
  transform-origin: 0 100%;
}