scss 响应纵横比Mixin

Posted 2021-05-17

/**
 * Responsive Aspect Ratio
 *
 * Example: @include respondive-ratio(16, 9);
 */
@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote(( $y / $x ) * 100 + '%');
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  }
  @else {
    padding-top: $padding;
  }
}