postCSS Mixins to help you save your CSS time

mixins.css

@define-mixin bottom-line-left $color, $height: 4px, $width: 60px, $padding: 0.25em, $margin: 1em {
  position: relative;
  margin-bottom: $margin;
  padding-bottom: $padding;

  &::after {
    content: '';
    position: absolute;
		left: 0;
		bottom: 0;
    height: $height;
    width: $width;
    background-color: $color;
		pointer-events: none;
  }
}

@define-mixin bottom-line-center $color, $height: 4px, $width: 150px, $padding: 0.25em, $margin: 1em {
  position: relative;
	margin-bottom: $margin;
  padding-bottom: $padding;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: $height;
    width: $width;
    background-color: $color;
		pointer-events: none;
  }
}

@define-mixin image-overlay $value {
  &::after {
    content: '';

    @mixin abs-full;

    background: rgba(0, 0, 0, $value);
    z-index: 1;
    transition: background-color 0.3s;
  }
}

@define-mixin image-ratio $ratio {
  position: relative;

  &::before {
    content: '';
    display: block;
    padding-top: calc($ratio * 100%);
  }

  & img {
    @mixin abs-full;

    z-index: 1;
  }
}

@define-mixin list-reset {
  margin: 0;
  padding: 0;
  text-indent: 0;
  list-style-type: none;
}

@define-mixin icon-size $size {
  width: $size;
  height: $size;

  & svg {
    width: $size;
    height: $size;
  }
}

@define-mixin scrollbar $thumb_color: var(--bs-primary), $track_color: var(--bs-light) {
	&::-webkit-scrollbar {
		width: 8px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $thumb_color;
	}

	&::-webkit-scrollbar-track {
		border-left: 1px solid $track_color;
	}
}

style.css

/** Sample usage **/

.widget-title {
	@mixin bottom-line-left var(--bs-primary), 4px, 40px, 0.5em, 1em;
}

.hero-image__image {
  @mixin image-overlay 0.4;
}

.post-card__image {
  @mixin image-ratio 1/1;
}

.hero-image__description ul {
  @mixin list-reset;
}

.two-up-intro__icon {
  @mixin icon-size 48px;
  
  @media (--md) {
    @mixin icon-size 60px;
  }
}

body {
	@mixin scrollbar var(--bs-primary), #eee;
}