new-templane/resources/sass/base/_mixins.scss

// MEDIA
@mixin media-max ($size) {
  @media only screen and (max-width: #{$size}px) {
    @content
  }
}

@mixin media-min ($size) {
  @media only screen and (min-width: #{$size}px) {
    @content
  }
}


@mixin media-min-h ($size) {
  @media screen and (min-height: #{$size}px) {
    @content
  }
}

@mixin media-max-h ($size) {
  @media screen and (max-height: #{$size}px) {
    @content
  }
}


@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

@mixin flex($justify: null, $align: null, $flow: null, $gap: null) {
	display: flex;
	@if $justify {
		justify-content: $justify;
	}
	@if $align {
		align-items: $align;
	}
	@if $flow {
		flex-flow: $flow;
	}
	@if $gap {
		gap: $gap;
	}
}

@mixin absolute($left: null, $top: null, $right: null, $bottom: null) {
	position: absolute;
	@if $left {
		left: $left;
	}
	@if $top {
		top: $top;
	}
	@if $right {
		right: $right;
	}
	@if $bottom {
		bottom: $bottom;
	}
}

@mixin desktop { @media (min-width: 1200px) { @content; } }
@mixin tablet { @media (max-width: 1199px) { @content; } }
@mixin mobile{ @media (max-width: 768px) { @content; } }
@mixin mobile-sm{ @media (max-width: 575px) { @content; } }

@mixin fz($size) {
	@if $size == l {
		font-size: var(--l);
	}
	@if $size == m {
		font-size: var(--m);
	}
	@if $size == s {
		font-size: var(--s);
	}
}

@mixin ai($width, $height) {
	&:after {
		content:'';
		display: block;
		padding-bottom: calc($height/$width*100%);
	}
}